Streaming live at 10am (PST)

Text over Hover Interaction?


#1

I created a hover interaction (the image just fades) over an image. Are there any ways to show text over that image when I hover over it? So that it fades and show text over the image at the same time.

Thanks!


#2

Yes, the principle is the following:

Start designing your element as it will show when hovered. With a background layer (that is your element when it's not hovered), and a top layer with your text, icon, image, and any color overlay you'd like to see there.

For conveniency, you can put everything that needs to hover the original thing in a Div. Give this div a class name, a unique one, not a combo class one.

To put the top layer on top of the bottom layer, use position:absolute and make sure their parent has posisiton:relative.

Now hide the top layer either with Opacity or Display or both.

Now add a hover trigger to your interaction, affecting the top layer and bringing it to visible.


#3