Add An Overlay & Show Titles + Metadata on Hover for Squarespace Summary & Gallery Blocks

One of the most requested customizations from clients and designers alike is hover effects - specifically how to add image overlays with text for gallery and summary blocks.

So let's get right into the code (and how it works). 

Something to consider is that when you start to get into CSS code this complicated, it helps to know how the code works. It will make troubleshooting and adjusting that much faster, and prevent you from having to google a bunch of sets of code and hobbling them together for a frankensolution. If you do need help with altering this code, you can pop into our CSS Resource Group (reference this post) and we can help ya get there.

 

Example 1: Overlay, Title Visible, and Tags Visible on Hover- Grid Summary Block

 

Code to Copy & Paste

//Filter on Hover for Summary Block Images//
.sqs-block-summary-v2 .summary-item:hover img
{filter: alpha(opacity=15);
opacity: 0.15;}

//Title Moves On Top Of Photo & Is Transparent//

.summary-item .summary-title
{margin: 0px !important;
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
color: transparent;}

//Title Visible on Hover//

.sqs-block-summary-v2 .summary-item:hover .summary-title
{color: #000000;
background:transparent;
transition: ease-in 300ms !important;
 -webkit-transition: ease-in 300ms !important;
 -moz-transition: ease-in 300ms !important;
 -ms-transition: ease-in 300ms !important;}

Full Code We Used For Example Site & How The Code Works (don't copy/paste this, it will not work)

To understand these notes, you'll have to have a basic understanding of CSS structures (what targets and properties are, and some of the most common ones). You can learn these things in our free course, coming soon!

The first section of our CSS is adding a filter over the images when one of the summary items is hovered over. First we target the block, then the item (but only on hover using :hover and finally the img because that's where the filter is being applied.
.sqs-block-summary-v2 .summary-item:hover img

Then, we add the filter. In this case the 15 and .15 indicate how opaque the image is. In this case, we want the image to be barely visible, so we set it at a low number, higher - means it would be more visible. Make sure both numbers are even (the opacity= is for IE and older browsers). 
{filter: alpha(opacity=15);
opacity: 0.15;}  

Next, we position the summary title on top of the image and make it transparent (which already visible in the summary, just have it displaying below to use the code). This is also where we adding some additional customizations to the font as you can see below in this full code. To position the summary we adjust its position to absolute, which makes it positioned within the summary item's box however we chose to adjust it. In this case, we adjusted the top to 40%, meaning it's 40% down from the top of the box. It also stretches the full width of the box, so if the titles were long, they would go all the way out to the edge. If your titles are long therefore, you might need to add padding to the left and right.
.summary-item .summary-title
{margin: 0px !important;
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
color: transparent;
font-size: 24px;
font-weight: 500;
font-family: Cormorant Garamond;}

The next section is where we make the summary title visible on hover (in this case, visible means we color it black. We also added a transition effect so it's a bit prettier. First, we target the summary block on hover using :hover, then we target the actual title we are changing. The 300ms is the timing - so you can increase or decrease this number (usually done in multiples of 50) to make it slower or faster. We also tried 250ms and 400ms before deciding on 300ms.
.sqs-block-summary-v2 .summary-item:hover .summary-title
{color: #000000;
background:transparent;
transition: ease-in 300ms !important;
 -webkit-transition: ease-in 300ms !important;
 -moz-transition: ease-in 300ms !important;
 -ms-transition: ease-in 300ms !important;}

 

Example 1: Greyscale Images to Color on Hover, Image Title Showing - Grid Gallery Block

Code to Copy & Paste

// Moves Text on Top of Images //
.sqs-gallery-block-grid .slide .image-slide-title
{display:block !important;
position: absolute;
bottom: 10%;
right: 10%;
left: 10%;
white-space: normal !important;
word-wrap: normal !important;
max-width: 80%;
line-height: 20px;}


//Greyscale Hover Effect on Images//
.sqs-gallery-block-grid .slide img

{filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .8s ease-in-out;}

.sqs-gallery-block-grid .slide img:hover

{filter: none;
-webkit-filter: grayscale(0);}

//Optional, additional filter for exaggerated effects (makes images opaque when black and white, then increases visibility on hover)//

.sqs-gallery-block-grid .slide img{
filter: alpha(opacity=50);
opacity: 0.5;}

.sqs-gallery-block-grid .slide img:hover {
filter: alpha(opacity=100);
opacity: 1;}

Full Code We Used For Example Site & How The Code Works (don't copy/paste this, it will not work)

To understand these notes, you'll have to have a basic understanding of CSS structures (what targets and properties are, and some of the most common ones). You can learn these things in our free course, coming soon!

First, we moved the text on top of the images. Then, we changed the display and position properties, and adjusted accordingly to get our text where we wanted it. You can change this to make your text on the top, replacing top:10% with bottom:10%, for example. We also added text formatting to make the font the way we wanted.
.sqs-gallery-block-grid .slide .image-slide-title
{display:block !important;
position: absolute;
bottom: 10%;
right: 10%;
left: 10%;
font-weight: 800;
white-space: normal !important;
word-wrap: normal !important;
max-width: 80%;
font-size: 16px;
line-height: 20px;
text-align: left;}


Next, we added the grayscale filter to the images. We also added a transition, to make the effect smoother.
.sqs-gallery-block-grid .slide img

{filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .8s ease-in-out;}

We also added an alpha filter (reduces image opacity) so the images would be especially dark until hovered over, thus exaggerating the effect.
.sqs-gallery-block-grid .slide img{
filter: alpha(opacity=50);
opacity: 0.5;}

Finally, we set the hover effects using :hover, so that the grayscale and alpha filters would disappear on hover.
.sqs-gallery-block-grid .slide img:hover {filter: none;
 -webkit-filter: grayscale(0);}
.sqs-gallery-block-grid .slide img:hover {
filter: alpha(opacity=100);
opacity: 1;}