Jump to content

Image overlay hover in 7.1 Masonry Grid

Recommended Posts

  • Replies 4
  • Views 955
  • Created
  • Last Reply

Top Posters In This Topic

I found this code below. A note below this code...

#img-hover {

background-image: url('first-image-url');

height: 20vw;

width: 20vw;

background-size:contain; }

#img-hover:hover {

background-image: url('second-image-url');



But I am unable to add the code injection into the gallery section for the above code to work

<div id="img-hover"></div>

Link to comment


I am a little naive when it comes to this stuff so to me this is the same thing, obviously it is not.

4 hours ago, tuanphan said:

Hover image >> Overlay appear


Hover image >> Change to another image

I would like to hover over the image and a new image appears, once you take the hover off the original images returns. 

The images is also a clickable link if that changes anything.

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.