(No-code Squarespace tutorial) Adding hover text on images
IMPORTANT UPDATE: As of 2023, Squarespace has a NEW editor you can use, called “Fluid Engine”. (You’ll know if you’re using a Fluid Engine section if there is a visible grid when you move an element around on the page.) This blog post tutorial does not apply to Fluid Engine sections, since Squarespace removed the “captions on hover” feature. However, this tutorial will still work for older editors and for any images on blog posts.
This is a great feature to use on your site in cases like these:
You work in the wedding industry and want to credit other photographers’ work
You are selling prints or other products, and want the price or product dimensions to show when you hover the mouse over it
You want to sneak in fun little bits of personality throughout your website to help create a playful atmosphere!
Roll your mouse over the image below to see it in action:
Hey there good lookin(;
How to add captions to an image when scroll over it
No custom CSS needed!
And yes, this works for your mobile site too. :)
Add an image block to your page in Squarespace
Add your image to the edit box that pops up
Below the image in the pop-up box, click the drop-down menu to the right of where it says “Caption”
Select the option “Caption overlay on hover”
Now click on the actual image block itself, and you will see the overlay bar appear at the bottom of the image
Click inside the overlay bar to type in your caption text
Then you can format the text to your liking, just like you would with a text block. Change it to the font of your choice, adjust the centering, add a link, etc.!
Click below to see the video walk-through tutorial on Instagram.
How to change the color of the caption overlay bar using CSS
You’ll want to copy the following code in Design > Custom CSS :
.image-caption-wrapper { background: #ffffff !important; opacity: 1 !important; }
This will make the background color white behind the hover text, and will apply to all images on the site.
You can of course swap out the #ffffff with the color code of your choice.
hey, you made it to the bottom!
Here are some more Squarespace tutorials for ya :)
