Targeting Image Blocks & Summary Images in Squarespace

Oct 13

In the most recent blast from the CSS-Tricks.com newsletter there was a link to this blog from Polypane.

There are some truly beautiful CSS transform examples with awesome hover effects. But this isn’t a tutorial on how to build these. This is a tutorial on how to use code someone else has shared on your website.

Finding and using CSS that others have shared is a key skill in becoming an expert web designer and developer. So in this tutorial. I’m going to show you how to apply the code, that Polypane has shared, to a few images in Squarespace, specifically, to Summary Block images & Image Block images.

Be sure to follow along with the process, and try to understand the why behind the code. This will help you become a better & faster coder/designer.

The process that I follow in the tutorial is one that I teach in my online course on CSS. If you’re interested in that course, just sign up for my newsletter, to stay up to date, the course is launching soon!

#Selectors to target the Summary Block Image

.summary-thumbnail.img-wrapper{
   /*Add CSS Here*/
}Custom CSS

#Selectors to target the Image Block

.sqs-block-image-figure .image-inset {
   /*Add CSS Here*/
}Custom CSS

If you’re applying styles and it’s not working, try adding the !important tag after the style before the semi-colon. This would force the style to be applied.