Streaming live at 10am (PST)

How to recreate this cool hover slide in effect?


Here is the effect I'd like to recreate:

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?


Can you please share your read only link?


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


Hello, @ckboddic

Yes, it is exactly how you should do this.

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



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.

closed #6

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