Streaming live at 10am (PST)

How to recreate this cool hover slide in effect?


#1

Here is the effect I'd like to recreate: http://www.fintechinnovators.com/

Notice when you hover over one of the companies, a grey-background div slides in from the left, covering the div you hovered over.

Inspecting those elements (divs), I see the grey div has a higher z-index, so it's able to cover up the original div.

Would I simply add a hover interaction to the first div and "affect a different element" (the grey div)?

I'm trying to understand how to achieve the slide in left-to-right effect. I see the grey-div is originally styled left:-100%. How do I get it to slide in?


#2

Can you please share your read only link?

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link


#3

I haven't built this page yet. I'm just wondering about the concept of building something like this :slight_smile:


#4

Hello, @ckboddic

Yes, it is exactly how you should do this.

Basically:
1) for each block create a div (wrapper) with position: relative and overflow: hidden.
2) add the content, it may be the other div with image and icon and title
3) add the hover layer- another div with position: absolute and z-index higher than content
4) add all what you need inside that overlay
5) create interaction ONLY WITH INITIAL STATE for the overlay, initial state: move left 100%
6) create interaction for the wrapper:
-affect different element (overlay div class)
-limit to nested element
-trigger: hover
-move to origin / move left 100%

Hope it helps

Cheers,
Anna


#5

This worked perfectly, Anna! Thanks! Very cool. That's exactly the way to do it. I just tested it out with one block...time to make 29 more.


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.