Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
scootnyc

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

Question

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!

Edited by scootnyc
Tidy

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 3

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

}



Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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)

Edited by Vexsoft
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...