Hi everyone,
I have been racking my brain on how to pull off what you see on Uber’s homepage (https://www.uber.com/en-US/) using Webflow.
Specifically, if you navigate down to FEATURES, you will notice a 2 x 3 grid of images that each have a transparent layer on top which contract vertically as you hover over it with your mouse.
Does anyone know how to pull this effect off in Webflow?
Cheers
It is quite simple. Here is the sample link, and here is the public link (example is on second page)
Basically what you do is place one div on top of another by making its position absolute and apply the interaction to the first div which has overflow:hidden
<div2> I am the overlay div with the text </div>
<div1> I am the image on the background. I will have an interaction that will affect div2</div>
Hope that helps
AWESOME!! This is exactly what I was looking for.
Thank you!