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!
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.