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