Add Hover Effects to Blog Post Thumbnails on Squarespace

Effects

Dec 27

Written By Sam Crawford

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 👇

Framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

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).

Blog post hover thumbnail hover effect Squarespace

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