Hover over text to reveal a thumbnail image

Hi

I'm struggling to find how to reveal a thumbnail image when you hover over a piece of text.  This is the page link.

https://www.abcdefghuman.com/special-projects

Example how someone achieved the effect >

https://tympanus.net/Development/RapidImageHoverMenuEffects/index2.html

Appreciate any support from the forum experts.

I know a code to do this, but image will be a fixed position (middle of text, left of text, right of text...), not follow cursor

Let's try it?

Thanks @tuanphan

Can you upload the code here? Just following on from your previous message @tuanphan

Each case will require a different code.

My idea is: Add an Image Block behind Text, use CSS code to hide it on initial, when users hover on text >> add a code to make image appear.

So you can try add Image Blocks for these text, I will check & give the code, if the code works, I will send a quick guide, so you can apply it for other text/images

Step 1. I guess, so I hide image with this @tuanphan ?

#block ID {
display: none;
}

Step 2. how do I make the image appear on hover?

On 2/26/2024 at 5:42 PM, ABCDEFGHUMAN said:

Step 1. I guess, so I hide image with this @tuanphan ?

#block ID {
display: none;
}

Step 2. how do I make the image appear on hover?

It will require some steps and each case require a different code, so I wrote this guide for you.

In case you can't make it work, you can follow all steps then share link to page where you added text/images, I can check & adjust your code easier

have you ever been able to do this?

On 2/29/2024 at 8:22 PM, G_Vigna said:

have you ever been able to do this?

I added the guide above, if you can't make it work, you can share link to page where you use image, I can adjust code for your case

Thanks @tuanphan 

Got it working, much appreciated

Hi @tuanphan - thanks for writing this guide. Trying it now - does it necessarily mean that I have to upgrade to the higher-level Business plan in order to be able to inject the code into the footer ('Code injection") vs. CSS? Thanks in advance!

On 4/3/2024 at 11:04 AM, zyhsu said:

Hi @tuanphan - thanks for writing this guide. Trying it now - does it necessarily mean that I have to upgrade to the higher-level Business plan in order to be able to inject the code into the footer ('Code injection") vs. CSS? Thanks in advance!

If you don't want to upgrade, you can add script code to Markdown Block

Hi @tuanphan

Is there a way to alter the code so that the image disappears when not hovering? Currently whatever the last text hovered's image stays up

On 7/17/2024 at 2:12 AM, musharna23 said:

Hi @tuanphan

Is there a way to alter the code so that the image disappears when not hovering? Currently whatever the last text hovered's image stays up

Can you share link to page where you use code? I can check easier.

Or you can follow this.