Squarespace Tutorial: Title Appear When Hovering on Summary Block

In this Squarespace tutorial I show how to have the title, metadata, excerpt and read more link fade in when the summary block thumbnail is hovered over.

Title Appear When Hovering on Summary Block

Custom CSS:

@media screen and (min-width:800px){
  .summary-item {
    //only use position relative with carousel summary block
    position: relative;

    img {
      transition: all .5s ease!important;
    }

    .summary-content {
      position: absolute;
      color: #fff;
      top: 50%;
      left: 50%;
      opacity: 0;
      transition: all .5s ease;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
    }
  }
  .summary-item:hover {
    img {
      -webkit-filter: brightness(50%);
      filter: brightness(50%);
    }

    .summary-content {
      opacity: 1;
    }
  }
}

Don’t Want to Watch the Video? Read the Post!

Hey guys, Chris Schwartz-Edmisten here from Schwartz-Edmisten Web Design and today we're going to be looking out how to create hover effects on summary galleries.

Before we get into the code for the summary blocks, we need to make sure the code only applies to specific summary blocks, as we may not want this effect on all of our summary blocks.

Targeting Summary Blocks in an Index Page

If you have the summary block in an index page, each section in the index page gets a unique section ID.

To find it, right click your section and click inspect. In my example, my section has an ID of “recent-articles.”

To make sure my summary block code only applies to my summary block in this section, all I have to do is wrap my code inside of “#recent-articles.”

#recent-articles {
  //summary block code goes here
}

Targeting Summary Blocks on a Regular Page

If you only want the code to apply to a summary block on a specific page, jump into the code by right clicking on the page and choosing “inspect”, and look for the page ID.

You can easily find it by going to the div called: main class=”Main Main--page” and then going down two divs.

The page id will look something like: id=”page-5ba2aa164d7a9c749ff86018”

Copy the page ID, and in the custom CSS, wrap the code inside of “#page-5ba2aa164d7a9c749ff86018.” That will make the code only apply to the summary block on that page.

#page-5ba2aa164d7a9c749ff86018 {
  //summary block code goes here
}

If you want this code to apply to all your summary blocks, then don't wrap it in anything.

Setting Up a Media Query

The first thing we will want to do is wrap all of our code in a media query so that the hover effect only works on desktop.

On smaller screens, there will not be enough room to display the title and description over the image, so we will want Squarespace to display that information how it would normally.

To do this, we must wrap our code in the following code:

@media screen and (min-width:800px){
  //all code goes in here
}

So to this point, if we are targeting a summary block on a specific page, our code should look like this:

@media screen and (min-width:800px) {
  #page-5ba2aa164d7a9c749ff86018 {
    //summary block code goes here
  }
}

Darken Image on Hover

Now, to set up our hover effect, we will want the image to darken so that we can see the text clearly when it fades in.

And we want the image to darken when the summary item is hovered over. To set that up, we can write the following code:

.summary-item:hover {    
  img {     
    -webkit-filter: brightness(50%);      
    filter: brightness(50%);    
  }
}

When the div with the class summary item is hovered over, the brightness filter will be applied to the image - making it darker.

In order for the effect to happen smoothly, and not just appear darker all at once, we will set a transition property on the image. The transition will take half a second with an easing of ease.

The reason the !important tag is necessary is beecause image blocks fade on when the page loads, so they have a default transition property already. In order for our transition to work, we have to use the !important tag which overrides the default:

img {      
  transition: all .5s ease !important;    
}

Make sure you put this code before our hover property code. You always define the default state first, and then the hover state below it. So now our code should look like this:

@media screen and (min-width:800px){
  #page-5ba2aa164d7a9c749ff86018 {
    img {               
      transition: all .5s ease !important;              
    }

    .summary-item:hover {                
      img {                  
        -webkit-filter: brightness(50%);                  
        filter: brightness(50%);          
      }
    }
  }
}

Place Summary Block Content Over Image

To place the summary content over the image, add the following code:

.summary-content {     
  position: absolute;     
  color: #fff;    
  top: 50%;    
  left: 50%;     
  opacity: 0;    
  transition: all .5s ease;    
  transform: translate(-50%, -50%);  
  -webkit-transform: translate(-50%, -50%);   
  -ms-transform: translate(-50%, -50%);    
  -moz-transform: translate(-50%, -50%);   
} 
}

This positions the content in the center of the thumbnail image. You will notice that we set the opacity to 0 for the initial state. We will now want to change our hover code to return the .summary-content opacity to 1.

To do this, we will place the following code inside the .summary-item:hover curly brackets, and below the img curly brackets.

.summary-content {      
  opacity: 1;    
}

Your code should now look like this:

@media screen and (min-width:800px) {    
  img {     
    transition: all .5s ease!important;   
  }

  .summary-content {  
    position: absolute;  
    color: #fff;    
    top: 50%;   
    left: 50%;   
    opacity: 0;    
    transition: all .5s ease;  
    transform: translate(-50%, -50%);  
    -webkit-transform: translate(-50%, -50%);  
    -ms-transform: translate(-50%, -50%);  
    -moz-transform: translate(-50%, -50%);  
  }

  .summary-item:hover {    
    img {      
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);   
    }    
    .summary-content {     
      opacity: 1;  
    }  
  }
}

The last thing I want to do is wrap the img and .summary-content CSS in .summary-item curly brackets. This is so that the image code only applies to the summary block thumbnail and not other images on the page.

If you are using the “Wall” or “Grid” style summary blocks, then this is your final code:

@media screen and (min-width:800px){ 
  .summary-item {   
    img {    
      transition: all .5s ease!important;  
    }   
    .summary-content {   
      position: absolute;  
      color: #fff;     
      top: 50%;  
      left: 50%;  
      opacity: 0;   
      transition: all .5s ease;   
      transform: translate(-50%, -50%);  
      -webkit-transform: translate(-50%, -50%);  
      -ms-transform: translate(-50%, -50%);  
      -moz-transform: translate(-50%, -50%); 
    }  
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
  }
}

If you are using the carousel style summary block, then you will also need to add “position: relative” to .summary-item. This will be your final code:

@media screen and (min-width:800px){ 
  .summary-item {  
    position: relative;
    
    img {    
      transition: all .5s ease!important;  
    }   
    .summary-content {   
      position: absolute;  
      color: #fff;     
      top: 50%;  
      left: 50%;  
      opacity: 0;   
      transition: all .5s ease;   
      transform: translate(-50%, -50%);  
      -webkit-transform: translate(-50%, -50%);  
      -ms-transform: translate(-50%, -50%);  
      -moz-transform: translate(-50%, -50%); 
    }  
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
  }
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris