How do you add hover effects and color overlays to your images in Squarespace? If you aren’t finding options to customize images in Squarespace the way you want to, you can create hover effects with CSS. Grab the code below that is mentioned in the video.
Chrome Extension
Don’t forget to download the Chrome extension to make your life easier!
Get the Squarespace ID Finder here.
ZOOM + OPACITY CHANGE HOVER STATE
Make sure to replace the #blockid with your own!
#blockid {
img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
}
#blockid:hover{
img {
transform: scale(1.1);
cursor:pointer;
opacity:0.5;
}
}
#blockid {
background-color:#ff0000;
}Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.
