How to add a pulsing image drop shadow on hover effect on a Squarespace site.

This tutorial will demonstrate how to create a captivating pulsing effect for the image drop shadow 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 seamlessly work for both versions. By following the steps outlined, you'll be able to add an engaging visual element to your Squarespace site, grabbing the attention of your visitors with a dynamic pulsing image drop shadow when they hover over it.

Complexity: Intermediary

---

Step 1: To add the pulsing image drop shadow on hover effect to images on your Squarespace site, simply copy the code below:

// Pulsing iImage Block Drop Shadow On Hover //  
.image-block:hover {
filter: drop-shadow(3px 4px 6px #FFBF00); 
animation: pulsate 3s ease-out;
animation-iteration-count: infinite;
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
}  

@keyframes pulsate { 
0% { opacity: 0.5;}
50% { opacity: 1.0;}
100% {  opacity: 0.5;} 
}

 
@-webkit-keyframes pulsate {
0% { opacity: 0.5; } 
50% {opacity: 1.0; }
100% { opacity: 0.5;} 
}

---

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, color, animation speed and opacity settings to your liking.

---

---