How to recreate this cool hover slide in effect?

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?

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.

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

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.

1 Like

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