Jump to content

Reveal image, on text hover 7.1

Recommended Posts

Posted

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

Screenshot 2024-02-17 at 16.44.36.png

  • Replies 8
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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. 

  • 2 weeks later...
Posted

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

reveal image.png

Posted
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

reveal image.png

Can you share link to this page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.