Adding a Dark Overlay Effect to Images on Hover in Squarespace
Step 1: Access the Squarespace Website Editor
Login to Squarespace: Go to Squarespace and log in to your account.
Select Your Site: Choose the website you want to edit from your dashboard.
Step 2: Open the Custom CSS Editor
Navigate to Design: In the left sidebar, click on Pages then scroll down to Website Tools and then Custom CSS.
Open Custom CSS: Click on "Custom CSS" to open the CSS editor.
Step 3: Add the CSS Code
Paste the CSS Code: Copy and paste the following CSS code into the Custom CSS editor:
#block-yui_3_17_2_1_1709892963342_4755 .fluidImageOverlay {
background: #222222!important;
opacity: 0;
}
#block-yui_3_17_2_1_1709892963342_4755:hover .fluidImageOverlay {
background: #222222!important;
opacity: .3;
transition: .3s
}
Step 4: Identify the Correct Block ID
Find the Block ID: The provided CSS code includes a specific block ID (#block-yui_3_17_2_1_1709892963342_4755). You need to replace this with the correct block ID for your image.
To find the block ID, go to the page where the image is located.
Use the Chrome extension Squarespace ID finder.
Look for the container element of the image and note its ID.
Step 5: Replace the Block ID
Edit the CSS Code: Replace #block-yui_3_17_2_1_1709892963342_4755 in the CSS code with the block ID you found in Step 4.
Step 6: Preview and Test
Preview the Site: Preview your site to ensure the changes are applied correctly.
Test the Hover Effect: Hover over the image to see the dark overlay effect.
Ensure Unique Block IDs: Each block on your Squarespace site has a unique ID. Make sure you are using the correct ID for the image you want to apply the effect to.
Adjust the Opacity and Transition: You can modify the opacity and transition values in the CSS code to achieve your desired effect.
And there you have it, a really simple way to add a dark overlay effect to your images on hover using custom CSS in Squarespace. This effect can enhance the visual appeal of your site and provide a more interactive experience for your visitors.
