Replace image with another image on hover

[kasparsmisins]

What I want to achieve is simple - replace one image with another (with dark background + text) on hover. I haven’t done it before and have no clue where to start using Cornerstone.

Can someone point me in the right direction? I haven’t been able to find a tutorial that would help me.

Exactly like here in the first example - How to adjust size of replacement image when using hover to change image - with http://www.worldhorizonsusa.org/

[christian]

Hey @kasparsmisins,

Please follow the No Coding setup shown in the following video.

Images with Text Overlay in Cornerstone Pro Content Builder

Hope that helps.

[kasparsmisins]

This looks very nice, and is easy to do. But I need something different. Just like in the example I’ve linked to. There’s an image, and on hover I want the same image but darker and with text on it. I’ve prepared both images.

[prakash_s]

Hi @kasparsmisins,

You can show text on hover over an image using Card element. Add the background image for the normal view from front settings.

Then add another background image from back settings

Then add the text from Back Content settings

Now disable the button text from Back Button settings and set font size 0 for the button.

Then set Flip time 0 from Interaction & Duration settings.

Here is documentation of the card element.

Hope it helps you.
Thanks