CSS Rollover effects on Squarespace image blocks - No. 3
Squarespace boasts a variety of tools to help designers construct beautiful webpages, but sometimes custom code (Squarespace CSS and HTML) is needed to make a webpage truly unique.
Marching on with our selection of Squarespace Image block plugins, I have created another attractive CSS rollover effect to help make your website unique.
This CSS plugin is similar to the one that came before it, however, this plugin is very useful to inform your users of the picture content before they scroll onto the 2nd tier of content (see video 1.2 of our masterclass series to learn about tiered content), as well as leaving the picture clear of text until rollover.
HERE IS A PREVIEW OF THE FINAL SQUARESPACE PLUGIN:
To target the individual image blocks for the effect, I have used the associated “Block ID’s”. These can be found using your browser’s developer tools and inspecting each element; however, I would highly recommend installing the “Squarespace Collection/Block Identifier” plugin if you use Google Chrome, for a quicker and easier solution.
Preparing the Image Blocks
Before we can add our code, we need to configure our image blocks so that they display both the image title and image description.
This is important as our code will modify these two elements almost exclusively.
Simply add an image block into your webpage > on the “IMAGE” dialogue box that opens up, click on the “Design” tab > select “Poster” > click on “APPLY”.
You can do this as many times as you need to, but this article covers four image blocks displayed in a grid-format.
The CSS Code
Replace the “Block ID’s” with your own; remember, you don’t need to use two image blocks for this code to work.
If you find that the font-size of the title/subtitle are too big/small, or you want to change the overlay colour, I have left comments in the code marking where to make the changes.
I hope you found this useful! Will :)