Hovering over a heading to reveal another element

[nallen]

Hello,

I’m trying to create a header with a fairly simple hover effect. When hovering over a text, the text should change color and a hidden element (a lottie animation) should appear next to the text.

I have a setup like this at the moment:

What I want to achieve is when hovering “Work” (Heading) then “Lottie” (Lottie element from Bricksable) should appear.

Doing it with pseudo-class did not work for me. Maybe I’m doing something wrong here?

I have also tried this CSS code on Page Settings > Custom CSS :

.header-anim {
  display: none; /* hide the lottie element by default */
}

.header-text-01:hover + .header-anim {
  display: block !important; /* show the lottie element when the mouse hovers over the heading */
}

This doesn’t work either…

When inspecting the element on frontend and manually change .header-anim > display: block my lottie animation appears.

But this element seems to have another class then the one I specified

Can someone point me in the right direction or is this a bug?

Thanks!

[digismith]

Is there a reason you can’t use interactions? Just give lottie a class or ID and target that… e.g.

add another interaction to hide.

[nallen]

Thank you, this seems to work! @digismith

Follow up question on the Interactions. Is there any way of using interactions to control values, for example opacity on mouse enter and mouse leave - but have it transition with easing?

Currently it only shows or hides the element, which is fine, but it would be awesome to get some sweet transitions / fades etc on this

[digismith]

It’s all here:

Interactions

Use SET ATTRIBUTE and add a class which sets opacity. Fade using CSS transitions.