Reveal image, on text hover 7.1

I've been researching for hours with no luck. I want to reveal different images in the middle of the page when hovered on specific text blocks to demonstrate a sneak peak of my projects while going through the list. Would love a gentle transition, but just plain opacity 0 to 1 would work too. Somebody help please.

The website url is sersah.com

pass is 20242024

@tuanphan Thanks in advance!!!

You mean hover on bold text or hover on 8 text columns in your screenshot?

Hover on that specific text block, there are more than 8, they each are a project, and I'd like to give them individual images that pop up on hover. 

@tuanphan sort of like this video. If you make the code for reveal images when hover over x, I can adjust it for the text block no problem. Any updates? Really need this, thanks-a-million in advance!!

Something like this (this is a site I helped a member a few months ago)

https://www.tuomasnurmi.com/

Hey, exactly like that! how do I make it happen?

Hi, I am here because I saw that the author and I have the same issue. I don't know where to post my question as I am new here. So I am building a website for someone. and I want to reveal the image on the bold txt I have infront of the image. I tried the CSS code but it is not working.

I used this CSS code :

@media only screen and (min-width:640px){#block-yui_3_17_2_1_1706962266224_16759{opacity:0;
transition:opacity 1s}
#block-yui_3_17_2_1_1706962266224_16759:hover{opacity:1; transition:opacity 1s}}

Just like in the attached image

I have the word Atlanta Georgia but beneath that word in the gray block, there is an image. I wanna be able to have that image reveal every time I hover my mouse over that block, so since there are many blocks, I want to be able to do it in all blocks. Thank you

On 3/3/2024 at 5:53 PM, practice said:

Hey, exactly like that! how do I make it happen?

On 3/3/2024 at 5:53 PM, practice said:

Hey, exactly like that! how do I make it happen?

You can follow this comment

On 3/5/2024 at 1:39 PM, Ethelyn said:

Hi, I am here because I saw that the author and I have the same issue. I don't know where to post my question as I am new here. So I am building a website for someone. and I want to reveal the image on the bold txt I have infront of the image. I tried the CSS code but it is not working.

I used this CSS code :

@media only screen and (min-width:640px){#block-yui_3_17_2_1_1706962266224_16759{opacity:0;
transition:opacity 1s}
#block-yui_3_17_2_1_1706962266224_16759:hover{opacity:1; transition:opacity 1s}}

 

Just like in the attached image

I have the word Atlanta Georgia but beneath that word in the gray block, there is an image. I wanna be able to have that image reveal every time I hover my mouse over that block, so since there are many blocks, I want to be able to do it in all blocks. Thank you

Can you share link to this page?