How to Replace Image On Hover Using Squarespace

Hover over the image to see the effect

 
 

Step 1: Copy and paste the below code into the Code Block on your page

<div class="swap-image">
  <img src="https://static1.squarespace.com/static/555dd680e4b0fbd59d8af73f/t/60a9177643620916d2fb9e1a/1621694327172/unsplash-image-s1xR3R7Q_H4.jpeg">
  <img src="https://static1.squarespace.com/static/555dd680e4b0fbd59d8af73f/t/60a9177f2963a3669586861c/1621694335833/unsplash-image-Ny5YFzSkf0E.jpeg">
</div>

Step 2: Copy and paste the below code into the the CSS Editor

.swap-image img:nth-child(1) {
  position: absolute;
  transition: 0.5s;
}

.swap-image img:nth-child(1):hover {
 opacity:0;
}

You should now see the exact same result as the example above.

Step 3: Use your own images

Tip: Use the same aspect ratio images

  1. Use the file upload area to upload assets for custom images or font files. Click Manage Custom Files under the CSS Editor.

  2. Click Add images or fonts or drag image files into that area to upload your images.

  3. Leave the cursor in the the CSS Editor and click on the file. This will automatically paste the link to the uploaded image.

  4. Copy the image link and replace it within the <img src=”…”> tag in the Code Block.

And that’s it! :)

 
 
 
 

Have a question? Post it below!

Ervinas1 Comment