FREE Squarespace Plugins for Rollover Effects on Images
Yes, we thought that might get your attention.
With the release of our own brand of Squarespace plugins, we thought we’d share a few with you.
To create truly unique websites, we will often develop our own code with that purpose in mind; we are now giving you a few of our favourite transition CSS plugins - so that everyone can use them!
In our everlasting pursuit to create the most expansive Squarespace plugin library on the web, we have decided to add our own range of Squarespace plugins to the mix, so here are a few freebies to help you with your own sites.
P.S. if you like Ken’s graphics for our plugins, have a look at his blog post: Adding Personality to your Website with Animated Gifs!
PLEASE NOTE:
To target the individual image blocks for the effect for the Squarespace BASIC hosting plan, I normally use the associated “Block ID’s”. These can easily 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 the 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 plugins
If your site is currently held on Squarespace’s BASIC hosting plan, then using the Block ID’s is a good way to ensure that you can target the image blocks individually. Just make sure you add them before each line of the CSS code.
Anyway, after all that setup let’s get into the good stuff!
What is a Squarespace Plugin?
A Squarespace plugin is a custom code snippet or add-on designed to extend or enhance the functionality of a Squarespace website. These plugins are not officially part of the Squarespace platform but are developed by third-party developers to offer additional features or integrations unavailable in the default Squarespace setup.
They can range from simple aesthetic tweaks, like unique fonts or animations, to complex functional improvements, such as advanced e-commerce tools or integration with external services. Installing a plugin usually involves adding custom code to your Squarespace site, which can be done through the site's code injection points or CSS editor.
I hope you find these helpful, and if you need any help, if you have any questions, feel free to comment below or get in touch!
- Will :)
