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 (see it live)

 

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;}

//Tags Move On Top Of Photo & Are Transparent//

.sqs-block-summary-v2 .summary-metadata-item--tags
{margin: 0px !important;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: transparent;
padding-right: 15%;
padding-left: 15%;}

 

//Tags Visible on Hover//

.sqs-block-summary-v2 .summary-item:hover .summary-metadata-item--tags

{color: #000000 !important;
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!

First, we targeted the page, because as a designer I want to make my code as clean as possible i.e. it shouldn't mess with summaries implemented on other pages and cause the client headaches in the future. For that, I pulled the page ID.
#collection-5aac1795562fa75becca4b98 {

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 30%, meaning it's 30% 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 (like we do below for tags - see that example).
.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;}

Now, we move onto the tags, repeating the last two steps above. We target the tags, then position them on top of the photo and make them transparent. We made the top 50% so that they are displayed lower than the title, but the rest of the settings are the same. We also changed the font to make it smaller, uppercase, spaced further apart, more bold, and sans-serif in this full code. Also, as the text is long and wraps into multiple lines, we wanted it 15% from the right and left edges rather than going all the way up to the edge of the image. So we added padding-right and padding-left. 
.sqs-block-summary-v2 .summary-metadata-item--tags
{margin: 0px !important;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: transparent;
padding-right: 15%;
padding-left: 15%;
font-size: 10px !important;
font-family: Brandon Grotesque !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.25em;}

Finally, we had to make the tags visible on hover like the title above - so we implemented the same code here. You'll notice we closed it all out with an extra bracket because above we had opened a bracket to implement this code only on the one page.

.sqs-block-summary-v2 .summary-item:hover .summary-metadata-item--tags
{color: #000000 !important;
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 (see it live)

Heads up: The linked site is a (legal) cannabis industry website, so don't go if you'll be triggered, and don't bug us about it below.

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;}
@media (max-width:800px)
{#block-yui_3_17_2_1_1529627329219_4940
.sqs-gallery-block-grid .slide .image-slide-title {font-size: 12px !important;} }


//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 - in this case, I targeted on the individual gallery block ID number so it wouldn't affect anything on the rest of the page or site. 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.
#block-yui_3_17_2_1_1529627329219_4940
.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;}

Since we changed the font, we wanted to make it mobile-friendly as well. Here we utilized a media query to make the font smaller on mobile.
@media (max-width:800px)
{#block-yui_3_17_2_1_1529627329219_4940
.sqs-gallery-block-grid .slide .image-slide-title {font-size: 12px !important;} }


Next, we added the grayscale filter to the images. We also added a transition, to make the effect smoother.
#block-yui_3_17_2_1_1529627329219_4940 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.
#block-yui_3_17_2_1_1529627329219_4940 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.
#block-yui_3_17_2_1_1529627329219_4940 img:hover {filter: none;
 -webkit-filter: grayscale(0);}
#block-yui_3_17_2_1_1529627329219_4940 img:hover {
filter: alpha(opacity=100);
opacity: 1;}

 

Quiz Time!

Based on the above code snippets, how would you make the titles in example 2 only show on hover?

Answer in the comments below, and we'll tell you if you're right! :) 


**Something to note - the code above is broken down in detail to show you HOW to write similar code. It was written for a very specific instance in both examples, so it will not always work when applied to your blocks. If you don't want to break down the code - the best way to combat any issues is to make the code more broad.

This will make ANY version of your title transparent.

.sqs-block-summary-v2 .summary-title a, .sqs-block-summary-v2 .summary-heading a, .sqs-block-summary-v2 .summary-title a:link, .sqs-block-summary-v2 .summary-heading a:link, .sqs-block-summary-v2 .summary-title a:visited, .sqs-block-summary-v2 .summary-heading a:visited {color: transparent;}

And this will make ANY version of your title reappear:

.sqs-block-summary-v2 .summary-item:hover .summary-title, .sqs-block-summary-v2 .summary-item:hover .summary-title a, .sqs-block-summary-v2 .summary-item:hover .summary-heading a, .sqs-block-summary-v2 .summary-item:hover .summary-title a:link, .sqs-block-summary-v2 .summary-item:hover .summary-heading a:link, .sqs-block-summary-v2 .summary-item:hover .summary-title a:visited, .sqs-block-summary-v2 .summary-item:hover .summary-heading a:visited
{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;}