Squarespace gallery block reveal text on hover effects: CSS quick guide

How to create a unique title text hover effect for gallery grid blocks in Squarespace 7.1. Here’s my quick and simple piece of CSS code that will make your gallery blocks stand out from the crowd! Choose from two unique styles below.

Style 1: Reveal Text with Overlay Colour

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code.

CSS code style 1

/* Gallery Block Grid Overlay on Hover */

.sqs-gallery-block-grid {

.slide a:after {

position: absolute;

content: "";

background: rgba(0,0,0,0.5); /* Overlay Color */

z-index: 999;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

transition: all 0.5s;

pointer-events: none;

}

.slide a {

position: relative;

}

.slide a {

position: relative;

opacity: 1 !important;

}

.slide:hover a:after {

opacity: 1;

}

.image-slide-title {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

width: 100%;

text-align: center;

color: white;

opacity: 0;

z-index: 1000;

transition: all 0.5s;

pointer-events: none;

}

.slide:hover .image-slide-title {

opacity: 1;

}

}

---

CSS code for static mobile titles:

Use the below code to show static image titles on mobile view…

---

/* gallery block mobile title */

@media (max-width: 768px) {

.image-slide-title {

position: absolute;

top: 80%;

left: 50%;

transform: translate(-50%,-50%);

width: 100%;

text-align: center;

font-weight: 500;

font-size: 12px!important;

color: white;

opacity: 0;

z-index: 1000;

transition: all 0.5s;

pointer-events: none;

opacity: 0.8 !important;

visibility: visible;

background-color: rgb(249, 154, 199, 0.5) !important;

}

}

---

Style 2: Squarespace Gallery Text Reveal On Hover Effect

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code.

CSS code style 2

/* Gallery Block Grid Reveal Hover */

.sqs-gallery-block-grid {
    .slide {
        a.image-slide-anchor {
            border-radius: 50%;
            overflow: hidden;
            & + .image-slide-title {
                display: block;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                color: #fff;
                pointer-events: none;
            }
            img {
                opacity: 0.1 !important;
            }
            &:after {
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                background-color: #212121; //background color
                border-radius: 50%;
                -ms-transition: .5s;
                -moz-transition: .5s;
                -webkit-transition: .5s;
                transition: .5s;
                cursor: pointer;
            }
            &:hover {
                & + .image-slide-title {
                    display: none;
                }
                &:after {
                    opacity: 0;
                }
                img {
                    opacity: 1 !important;
                }
            }
        }
    }
}

---

Did I help you? Consider buying me a coffee as thanks!