If you want to add more depth to your blog collection page on Squarespace you might opt for a hover effect.

The problem is however that there’s no way to do this natively and you need, you guessed it, some custom CSS.

Watch the video

Check out the YouTube video below 👇

Head to your blog page and hit Command + Shift + C to bring up Google Chrome Developer Tools. Hover over your blog page until everything is highlighted and retrieve the target name.

Copy this target name and then head to Website > Website Tools > Custom CSS and paste it into your custom CSS box.

You then want to add the following code:

.blog-basic-grid .blog-basic-grid--container.is-loaded {
img {
transition: 0.3s;
}
&:hover {
.blog-title * {
opacity: 0.75 !important;
}
}
}

This code will add a transition and effect to your blog post thumbnails and will be activated when a user hovers over any part of the blog post (e.g. either the image or the title).

You can have a play around with the opacity and transformations in order to get the effect you desire.

If you want to add the hover effect to your titles too you’ll need to add the target name for your blog post titles and then the following code:

.blog-basic-grid .blog-basic-grid--container.is-loaded {
img {
transition: 0.3s;
}
&:hover {
.blog-title * {
opacity: 0.75 !important;
}
img {
opacity: 0.75;
transform: scale(1.2)
}
}
}

📩 Join the inner circle to get exclusive code updates

Once you’re happy, hit save and you’ll have added a hover effect to your blog post page on Squarespace. 

This is a great way to add depth to your page and make your overall website look and feel more professional.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?