Image Hover Opacity Effect
How to Add an Opacity Image Hover Effect in Squarespace 7.1
Want to give your images a subtle opacity effect on hover for your Squarespace site? This simple plugin adds a professional touch to your visuals, perfect for creating dynamic interactions as users explore your content. With this plugin, you can choose to decrease or increase the opacity of your images on hover. You can apply the effect to all images site-wide, to specific images using block IDs, or to images on specific pages.
Difficulty Level:
Total Beginner: 5/10 (Basic CSS knowledge is helpful, but you can follow along easily!)
Intermediate: 3/10 (Simple CSS copy-pasting)
Expert: 1/10 (Quick and simple)
Option 1: Apply the Effect Site-Wide (All Images)
1. Decrease Opacity on Hover
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code:
/* Decrease Opacity on Hover for All Images */
.sqs-block-image img {
opacity: 1;
transition: opacity 0.5s ease;
}
.sqs-block-image:hover img {
opacity: 0.7;
}
Save your changes to apply the effect to all images on your site.
2. Increase Opacity on Hover
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code:
/* Increase Opacity on Hover for All Images */
.sqs-block-image img {
opacity: 0.7;
transition: opacity 0.5s ease;
}
.sqs-block-image:hover img {
opacity: 1;
}
Save your changes to apply the effect to all images on your site.
Option 2: Apply the Effect to Specific Images Using Block IDs
To apply these effects to only certain images, you’ll need each image’s unique block ID.
Finding the Block ID:
Open the page with the image in your browser.
Right-click on the image and select **Inspect**.
Look for the unique identifier `block-id-XXXX` and note it.
1. Decrease Opacity for a Specific Image
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, adding the specific block ID instead of #block-id-XXXX:
/* Decrease Opacity on Hover for Specific Image */
#block-id-XXXX img {
opacity: 1;
transition: opacity 0.5s ease;
}
#block-id-XXXX:hover img {
opacity: 0.7;
}
Save your changes to apply the effect to specific images on your site.
2. Increase Opacity for a Specific Image
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, adding the specific block ID instead of #block-id-XXXX:
/* Increase Opacity on Hover for Specific Image */
#block-id-XXXX img {
opacity: 0.7;
transition: opacity 0.5s ease;
}
#block-id-XXXX:hover img {
opacity: 1;
}
Save your changes to apply the effect to specific images on your site.
Option 3: Apply the Effect to All Images on a Specific Page
This option lets you target all images on a particular page by using the page’s unique ID.
Finding the Page ID:
Open the page you want to target in a browser.
Right-click on the page and select Inspect.
Look in the <body> tag for page-id-XXXX and note the ID.
1. Decrease Opacity for All Images on a Specific Page
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, adding the specific page ID instead of .page-id-XXXX:
/* Decrease Opacity on Hover for All Images on Specific Page */
.page-id-XXXX .sqs-block-image img {
opacity: 1;
transition: opacity 0.5s ease;
}
.page-id-XXXX .sqs-block-image:hover img {
opacity: 0.7;
}
Save your changes to apply the effect to all images on the specific page.
2. Increase Opacity for All Images on a Specific Page
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, adding the specific page ID instead of .page-id-XXXX:
/* Increase Opacity on Hover for All Images on Specific Page */
.page-id-XXXX .sqs-block-image img {
opacity: 0.7;
transition: opacity 0.5s ease;
}
.page-id-XXXX .sqs-block-image:hover img {
opacity: 1;
}
Save your changes to apply the effect to all images on the specific page.
Need Help?
If you need further assistance with installation or customization, reach out to us at letstalk@usual.ie. We’re here to help!
