Jump to content

How to customize the “caption overlay on hover” feature to fill 100% of the image?

Recommended Posts

Does anyone know some CSS Code to customize the current “Caption Overlay on Hover” option for images on the Pacific template? I’d like the caption overlays to appear over 100% of the image when I hover.

The width spans the entire length of the picture, but the height only spans about 50% of the picture, depending on how much I write in the text box. This is driving me nuts, and it makes my mobile site look horrible!

Ideally, I’d like my caption overlay on hover to fit 100% of the image like this: http://www.vergecollective.com/#expressions-page

I've tried the following CSS code, but it isn't working:

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper {
 height: 100% !important; 

Any help or suggestions on my CSS code? Thanks!

Link to comment
  • Replies 10
  • Created
  • Last Reply


Try adding the following to the custom css editor. It's not 100% perfect but it's much better.

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {

height: calc(100% - 32px);


If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 9 months later...

Hi there,

when I used that code, I can't click on the image anymore. And I need to click on it to lead me to another page.

Here is the code I use :

.image-caption-wrapper { padding: 5px!important; margin: 0px!important; text-align: center;}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {

height: calc(100% - 12px);}

Thanks for your help !!!!

Link to comment
  • 8 months later...

There are many solutions out there (some good and some bad), but you might want to do some Googling to find them. Basically, you need to write some custom Less (CSS) to change the styling of Squarespace's Image Caption Overlay on Hover effect. Ultimately, overriding Squarespace's default styling.

Devon Stank @ Devonstank.com (Squarespace Tips & Tricks)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.