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

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!

Can you post a link to your site?

Hi,

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);

}

Thanks for the tip!! My images are now covered 75% from the top.
Do I need to tweak the - 32px to make the text box cover 100% of the image? I tried 40px, but that just made it worse...

I used 100% - 32px because there's a 16px padding above and below the image. Using the full 100% makes the overlay much taller than the image.

Got it. Thank you SO MUCH for the help!! You can definitely count me as your deed for the day!

No probs. Feel free to approve the answer and/or vote it up.

Note that calc ( ) isn't supported by some older browser versions but it will work perfectly in 82.32% of browsers out there.

See http://caniuse.com/#feat=calc for the breakdown of what works and what doesn't.

Very handy to know. Thanks again!

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 !!!!

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)