(Squarespace) Hover a Gallery image > Show an image overlay

Pro Tips Other Tips
1

If you want to make a background image overlay appears when hover images on Gallery Section (all images will use same overlay), you can use this code to Website > Website Tools > Custom CSS.

figure[class*="gallery-"] a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important
}
figure[class*="gallery-"]:hover a:after {
    opacity: 0.5;
}

Replace Pixabay with your overlay image url.

2 Likes