Create an image hover effect for summary block images

 

I've recently shared a few different ways of how you can be creative using your Squarespace site. A few weeks ago, I shared a post on how you can add your own customized headings throughout your website.  

This week, I wanted to share another css tutorial that could help you make your website stand out. 

Blog_HoverEffect.png

This tutorial involves a hover effect for the summary block images.

1. Copy the following code

Before you begin, you'll want to copy the following code to create your image hover effect

 img.summary-thumbnail-image.loaded:hover {
 opacity: 0.5;
 }

css breakdown:

'opacity' targets how "see-thru" your hover effect will be. 

 

2. Paste the code

If you want this hover effect to appear on all of your website, you'll want to add it in your sites css section (Design tab).

DESIGN > CUSTOM CSS

If you're looking to only have it appear on a specific page, you'll want to click the 'gear' icon on that specific page, and navigate to the 'advanced' section of that page and paste the following code:

<style>
 img.summary-thumbnail-image.loaded:hover {
 opacity: 0.5;
 }
</style>

Don't forget to save it, otherwise the code won't work!