Mouseover effect on https://webflow.com/grid

Design help General
1

Hi guys,

I’m trying to emulate the mouseover effect on the new Build CSS grid layouts visually | Webflow homepage

I love this effect but not 100% how its been achieved.

I’m guessing some custom code may be needed. After looking at the code I saw:

" style=“filter: hue-rotate(-116.014deg); will-change: filter;” class=“bg”>

If anyone has any tips that would be great.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

That’s funny to reverse engineer :slight_smile:

There’s one IX2 that is onLoad and targetting a class that all the grid cells share, that is affecting their color, changing it from one to another to another… and repeat with a loop.

All those cells are divs.

Now there is an opacity IX2 on those divs, or rather on a div surrounding each of them (it’s better to not have several IX on the same element, so it’s better to nest). So those container divs are 0% opacity by defaut, and a onHover IX2 is probably making them 100% opacity and making this opacity fade to 0% in 3 seconds or so.

Or something close :slight_smile:

3

Oh, as the colored by is a gradient that takes up all the viewport, maybe it’s the other way around: the cells are white and the onHover IX makes them transparent for a few seconds.

@ryanmorrison did you do this? how far are we? :smiley:

4

This is exactly what happens, yep.

5

Appreciate the feedback.

Simple trick = great effect :slight_smile:

I’ll give it a go

6

I reproduced it :slight_smile: I’m not sure my gradient is as complex as theirs (it’s a 1 color to white gradient) but… you see how it works.

1 Like
7

Here’s the link to open it in Webflow Webflow - ✓ Webflow Grid landing page hovered grid effect

8

Love it
:grinning:

Thanks so much @vincent