Streaming live at 10am (PST)

How to apply hover interactions for just one element at a time


#1

I have three rows that each show a team-member’s profile image and description. I want to implement a hover effect on the image-profile in such a way that it reveals text on-hover. I’d like for the hover-interaction to be applied for just that element at a time, but when I hover over the profile-image, the interaction applies to all other profile-images below for the other team members.

I want it to work one div at a time, with the other elements inactive until it get’s “hovered-upon”.

I’ve added my own custom CSS, which oddly enough only works on tablet devices. It should work on desktop/laptop devices.
Here’s my css code:

.team_img > .overlay__text__wrapper{
 opacity: 0;
 transition: opacity 1s ease-in-out;

}
.team_img:hover > .overlay__text__wrapper{
opacity: 1;
}

Here’s my read-only link https://preview.webflow.com/preview/an-angel-in-queens?preview=922b226e64946b2c19d1c69adfc9edce

I appreciate your help!


#2

JG_ABL

I’m unable to give you a definitive answer (I can’t save interaction changes on your preview) but perhaps some ideas will help.

First of all, for whatever reason, when I load the desktop, tablet, or phone views they load without the text (as I assume it should be) then reveal the text on hover. It’s not restricted to just tablet size for me.

I’m pretty sure you can get just what you want in Webflow, so I’d comment out your custom code for now.

I can think of two things about the interactions: you should probably set an initial state in your interaction (it’s at the top of the panel) for the wrapper. Set it to an opacity of 0 and just for good measure, set it to hidden.

As I’m reading your interaction right now, it says that Hover Over should be Opacity:100% at 200ms. However, it also says that Hover Out should be Opacity:100% at 200ms.

What I’ve done for modals (much the same as you’re doing) is set the initial appearance at zero opacity and hidden, then Hover Over would set the opacity at 100% and, the time at 200ms, and the display attribute to Block. Hover Out would be to set the opacity to zero, the time at 200ms, and the display attribute at hidden.

I believe to isolate the effect to one team member at a time you’d need to add a second class, so maybe “Overlay_Text_Wrapper” “Member1” and set the interaction then copy it for “Overlay_Text_Wrapper” “Member2”. That way interactions will know you’re targeting a single instance of the Overlay Text Wrapper. I am not certain this is the only way to do it, so perhaps someone else will post here.

By the way, your custom code is specifically telling every instance of overlay_text_wrapper to be the target of your hover, so it isn’t able to target only one.


#3

Hi @lblampman- firstly, thank you so much for taking the time to respond! I’ll take a look at your suggestions and update you on its progress :slight_smile:


#4

“I believe to isolate the effect to one team member at a time you’d need to add a second class, so maybe “Overlay_Text_Wrapper” “Member1” and set the interaction then copy it for “Overlay_Text_Wrapper” “Member2”.”

I’ve added a secondary class to isolate the hover effect and webflow seems to only register the primary class, which propagates the hover effect simultaneously to the other elements.

Have you encountered this before? thanks again


#5

UPDATE- got it to work by creating separate hover effects for each custom class. There was no modularize the effect and implement it to a class such as “overlay_text_wrapper” and a helper class such as “member1”

Appreciate your help!


#6

Hi JG_ABL,

Sorry for the late reply, things got a bit hectic here.

Your first sentence nailed it, and what I was trying to say (unsuccessfully)…that is, the interactions have to be separate for each element. And I overcomplicated things by adding the second class (thinking more of styling than interactions).

Glad you got it working!


#7

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