Website Building » Squarespace » How Do I Make an Image Hover in Squarespace?

How Do I Make an Image Hover in Squarespace?

Last updated on December 23, 2022 @ 8:25 pm

When you hover over an image on some websites, the image changes to reveal more information. For example, on e-commerce sites, hovering over a product image might reveal the name, price, or a short description of the product. You can add this type of hover effect to images on your Squarespace site using CSS code.

To make an image hover in Squarespace:

    1. Select the image block you want to add the hover effect to.
    2. In the Block Settings panel on the right, click Advanced.
    3. In the Advanced Code section, paste your CSS code into the Custom CSS field.
PRO TIP: If you are not familiar with coding, we do not recommend trying to make an image hover in Squarespace. This can result in problems with your site’s code and can cause your site to break.

Here’s an example of CSS code that will make an image change when you hover over it:

/* Swap out images on hover */
[data-image-id="5b73c1f1e4b0d37c2aebd00f"] {  /* First image */
  content: url(https://static1.Squarespace.com/static/
555e48afe4b09efebcadb3e7/t/5b73c27be4b0a6a5981a7914/
1533145076303/image1.jpg);
}
[data-image-id="5b73c1f1e4b0d37c2aebd00f"]:hover { 
/* First image, when hovered */
  content: url(https://static1.com/static/555e48afe4b09efebcadb3e7/t/
5b73c29de4b02d42ecdafda6/1533145111572/image2.jpg); 
}

You can add as many images as you want to this CSS code, just make sure to change the data-image-id value to match the id of each image block. You can find an image’s id by inspecting its code in your browser’s developer tools.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.