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

Enhancing user interaction on your website can be as simple as adding a visual effect like a drop shadow on hover. In this tutorial, you'll learn how to apply a drop shadow to image blocks on your Squarespace site when users hover over them. This method is compatible with Squarespace 7.0 and 7.1 and only requires a few lines of CSS.

This hover effect helps create a more engaging and modern design by adding depth, drawing attention, and making the site feel more dynamic and professional.

Table of Contents

• Why Add a Hover Drop Shadow?

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add a Hover Drop Shadow?

Here are several reasons why adding a hover effect to your Squarespace image blocks is a great design move:

• Visual Feedback: Gives users a subtle cue that an image is interactive or clickable.

• Modern Aesthetic: Adds a soft animation and visual depth without distracting from content.

• Content Highlighting: Ideal for spotlighting featured products, galleries, or blog post images.

• Improved Engagement: Interactive elements keep visitors engaged and encourage them to explore your site further.

Complexity: Easy

---

Step-by-Step Instructions

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 the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.

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

Key Takeaways

• Works with Squarespace 7.0 and 7.1.

• Adds subtle interactivity and visual appeal.

• Helps emphasize clickable or important content.

• Customizable to match your brand’s style.

FAQs

Can I apply this effect to only certain image blocks?
Yes, you can use a specific block ID or page collection ID to target individual image blocks instead of applying it site-wide.

Will this effect slow down my website?
No. This CSS hover effect is lightweight and has a negligible impact on site speed or performance.

Can I combine this with other hover effects?
Yes. You can pair it with transitions like zoom or colour filters for a more dynamic visual experience.

Does this work on mobile devices?
Hover effects are generally not visible on touchscreens, but they won't negatively affect mobile usability.

---

---

Conclusion

Adding a drop shadow on hover to image blocks in Squarespace is a quick and effective way to improve the look and feel of your site. It enhances visual hierarchy, increases