Focus mode, IA Writer style

Hi guys!

I’m new in here and in webflow, but I started designing my new website for freelancing, and I wanted to achieve a particular look/feature.

Have a look on IA Writer and its focus mode : https://medium.com/ia-writer-tips-and-tricks/focus-on-one-idea-at-a-time-ff5116ee6754

I really like this focusing idea, where the central section is always in plain and saturated color (rich black) and sections above and below are desaturated to keep focus.

Can we achieve the same effect in Webflow?

I was wondering if using gradients in overlay could approach the idea, if it’s too complicated by default my idea…

Cheers from France :wink:

This is totally possible!

If you’re using the collections, you could divide the item with a top part for text, a middle part where you insert the video, and a bottom part for remaining text.

And you would just decide what text to put on the top and bottom.

So when it comes to the page layout, this could be three separate sections to make the styling easy.

And if you’re good with CSS, you could probably get this all to work within one which text element if you know how to control the certain classes that you will set up