How to add an image block drop shadow on hover to a Squarespace site

This tutorial will guide you through the process of adding a drop shadow effect to an image block on your Squarespace website when hovering over it. Whether you're using Squarespace 7.0 or 7.1, the code provided in this tutorial will work seamlessly for both versions. By following the steps outlined, you'll be able to enhance the visual experience of your website visitors by adding an interactive drop shadow effect to the image blocks on your Squarespace site when they hover over them.

Complexity: Easy

---

Step 1: To add the image block drop shadow on hover, simply copy the code below:

// Image Block Drop Shadow On Hover //  
.image-block:hover {   
filter: drop-shadow(3px 4px 6px #FFBF00); 
}

---

Step 2: From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

You can then adjust the drop shadow px sizes and color to your liking.

---

---