Trying to Replicate Show/Hide Div on Nested Elements

I am working on the leadership section of http://servicerocket-inc.webflow.com/company. I have achieved my desired interaction for the first leader column (Rob), but I have been unable to replicate it in a sensible, scalable way on the rest of the divs.

I want to be able to click on any of the photos to view that leader’s description.

My interactions:
I have the class ‘leader description’ to “display none on load”
I have the class ‘work overlay’ to display ‘leader description’ to nested elements when clicked, and to hide on second click.

Any advice on replicating the successful interaction on 7 additional columns?

Thanks!

It would be easier if you shared you public link.
Learn how to do it here: Share a read-only link | Webflow University

Ok there’s a very good way to immediately replicate your interaction by assigning it to the other cells of your lead table.

The structure has to be exactly the same for all cells. (By the way, add a Link Block to the top of the hierarchy of each cell, don’t put a link, but you’ll get the hand cursor). Let’s say your structure is like this:

Row
– Column
---- Cell-link (the Link Block, as recommended)
------ Cell-div (We will affect the interaction on this element) (set to Position:relative)
-------- Image-leader (the image, set to position:absolute so it covers exactly the Cell-div
-------- Cell-text (Text Block that appears on Hover) (set it to position:absolute so it covers the image as desired (It is very important that this element is a CHILD of the Cell-div element, we will get to that later)

So to begin with, one your Text element designed, set it at Display:none, or do like you did, and interaction that hides it on load.

And your interaction will be:

  1. Add a trigger: on mouse over
  2. Check the “Affect different element” box http://cl.ly/image/3F1g0c221k15 and in the field below, write “Cell-text” (it should auto fill).
  3. Check the “Limit to nested element” box just under. http://cl.ly/image/3D402l00082O This is the answer to your question: it will limit the effect to this structure, so the other cells (leaders) Cell-text elements won’t be affected.
  4. Set the Hover over and Hover out parts as desired (Opacity 100% Ease 300ms for the first and Opacity 0% 200ms ease out for the second, most likely)

Now select each of the Cell-div of your grid and affect them the interaction. All changes to the interaction will propagate to all cells.

The reason the Cell-text element has to be a CHILD of the element we’re giving the interaction to is because if it wasn’t, the Mouse Over event will stop as soon as Cell-text will appear: it will bug.

For interaction and structure, look here : http://sab.webflow.com/circle-with-css-transition (public link on the green dot)

3 Likes

Thank you for your help! My issue was resolved when I structured the cells appropriately (ensuring my text cell was nested) to the appropriate div).