Display text on image only when hovering

How To
1

Hi Guys!

I’m trying to achieve something which doesn’t seem possible with standard tools, but what do I know:

I’d like to display some small lines of describing text directly on top of the images of the site when hovering over the image. The text should only get visible when hovering, invisible when not and is different for every image.

Is this possible?

Regards

1 Like
2

Hi @Ursurpax

Is this just for a normal image, or the post elements images, or a background image?

3

Just for a normal image.

4

I would achieve this by

Adding a container (vertical align)
add image
add text

The text will be below the image at this point so you will need to change the text element position to absolute and then style it (position, colour etc).

To get the hover to appear effect, you will need to go the image and give it a z-index of 2 which should now make the image above the text (text not visible). Then go to hover mode and change the z-index from 2 to -2 so now when you hover on the image it pushes it behind to reveal the text.

Hope that makes sense.

Kind Regards

Mick

5

Good approach by Michael, but I would suggest using opacity instead of z-index on the text, because opacity can be animated with a transition.

1 Like
6

Ah of course! yes this for sure :point_up_2:

7

Thanx guys! z-index works like it should apart from being not able to fade the text in.

With opacity I have the problem that the area of the text is not the same as the picture, so the text only gets visible when you hover over the text area.

I’d like it to get visible when hovering anywhere over the image area. Is there an easy way to accomplish this?

1 Like
8

Hi @Ursurpax,

it depends which element you’re using for your text (most of them are wrapped with wrapper divs, so applying a width and a height won’t have any effect, except if you’re using the basic text element).

You can keep it simple and put your text element inside a container element, set its width and height to 100%, position: absolute (top right bottom left to 0) and change the hover state on the container instead of your text element.

Best regards,
timmse

1 Like