Jump to content

Hover over effects - Zooming in image and letters appearing troubleshooting

Recommended Posts

I am currently trying to achieve a zooming in effect while hovering over an image while at the same time a text will also appear. Any suggestions? 

.sqs-block-image-link:hover {transform: scale(1.1); transition: .4s;}
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1690813603606_5613{
opacity: 0;
 transition: opacity 1s
}
#block-yui_3_17_2_1_1690813603606_5613:hover {
opacity: 1;
transition: opacity 1s
  }
}

The first line handles the zooming in effect, while the rest of the code is about the text visibility while hovering over it.

Link to comment
  • Replies 3
  • Views 760
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks for the reply,

The page is currently unpublished and still under construction so I have made her available through password for you to see it as it's the only option Squarespace gives me. So this is the link, https://rose-bugle-hsrk.squarespace.com/projects/project-one, and password is 123. There you will see a small image of a marble and when you hover over it you will see letters appearing. Have in mind that later on the same image with letters will be linked to another page on my website!

Link to comment

Hi,

No way to do this. If you inspect element, you will see Image Block HTML tag above Text Block HTML tag. We can only target the element below the Text Block, but it is difficult to target the element above it.

You can consider using Classic Editor Image Block (it has some options to achieve text appear on overlay, then we can use additional CSS to make zoom effect). Or you can also use Gallery Section.

If you need a guide, I will do a quick video/or quick guide

image.thumb.png.6f26740b56f355c2bfca45d95459a9a0.png

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

Link to comment

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.