How can I change the style of my caption overlay on hover?

I am using the Bedford template and I would like to change the "caption overlay on hover" feature so that the overlay covers the whole image, the whole image is clickable, and I can customize the colors of text and the overlay itself. The default "caption overlay on hover" style is a small transparent gray bar that overlays the very bottom of the image.

I searched everywhere for a cohesive snippet of custom CSS code, and while there are several partial answers, I have yet to see something that covers all of my wish list. I'll keep tinkering and report back!

I got it the way I want it! To see this code in action, see Heart & Dash Portfolio.

If you want this code to work, do not use an image grid. Instead, create your own 'grid' by simply inserting multiple image blocks.

You'll insert this code by going to "Design" then "Custom CSS":

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: relative;
 pointer-events: none !important;
}

&:hover,
&:focus {
 opacity: 1;
}

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

.image-caption p {
 font-size: 18px !important;
 font-weight: semibold !important;
 color: #ea4e4c !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;
}

.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 {
 background: #fddcce;
 opacity: .9;
}

The nice thing about this is that you can customize the color of the caption/type (I used #ea4e4c) that appears on hover and you can also customize the color of the background (I used #fddcce). You can customize those hex color codes for yourself.

For me, this is a total solution!

Can't tell you how much I appreciate this information! One part of the code isn't working for me though -- I can't seem to change the color of the background on hover overlay, which may be in part because I see duplicate classes listed in the last code block, and because I think "intrinsic" is a class you added yourself? Any help would be greatly appreciated!

You can see the issue on the top row of www.wanderlost.co/images (still in progress!).

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)

Omgosh it worked for me thank you so much! I really appreciate it.

Thank you so much for this! But I don't seem to be able to make the font size any bigger no matter what I do, can anyone help please?!

@starburst5654 Hi I was wondering if you were able to figure this out? I used @HeartAndDash css as well which worked perfectly except for my not being able to change the background color. Just wondering if perhaps you've found the answer. Thanks!

how can i make the overlay background completely opaque with this code?

To change the background color use only .image-caption-wrapper in code line 39. The snippet below makes the overlay white

.image-caption-wrapper {
  background: #ffffff !important;
  opacity: 1 !important;
}

This is no longer working, it is only showing up on half of my image, is this happening for anyone else?

@HannahWestergaard yes, same here

@HannahWestergaard same here. Any luck figuring it out?

Same here. Hope someone can provide a fix.

@HannahWestergaard and @Bliss and Mischief I added the following to the bottom of my code and it worked! Let me know.

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper { max-height: 100%; }

Wow, that works perfect for me. Thank you so very much! :)

Worked, thank you!

OKAY. I am loving the look of your code! Right now, the code shows the image above and below the hover. I'd like that same feature on the left and right sides of the image when it hovers. Kinda so it looks like this:

I'm also not sure how to change ALL of the font colors, I can manipulate the font colors that show in red but the rest stay a light cream? How do I fix that? See below:

If I wanted to do this for a gallery block, is there another code I should use?

Thanks in advance! I'm JUUUST starting to venture into code. :D

Thank you so much!!! Was having the same problem and appreciate the fix!

This solution worked for me for a while, but now the hover box is only appearing over 2/3 of the box. Any idea how to resolve? (link to example of this issue: https://samstember.com/)

Hi this is working for me but now it won't let me change the background color -- it's stuck at black. Any ideas? Thanks all. @ericbyers

This worked but now it's not letting me change the background color... it's stuck on a black/grey. Anyone have any idea what's up? @ericbyers

@stemberdesign I was able to solve for this by adding a line for 'max height'

.image-caption-wrapper { max-height: 100% !important; }

On 3/4/2019 at 10:30 AM, Evahill said:

This worked but now it's not letting me change the background color... it's stuck on a black/grey. Anyone have any idea what's up? @ericbyers

To change the background color of the overlay, I discovered you need to use an RGBA color on the image caption wrapper like this:

.image-caption-wrapper {
  background: rgba(188,120,53,0.75) !important;
}

Was there ever a fix on this? I tried both approaches but neither allowed me to change my background colour. 🤔

4 hours ago, Glencairn said:

Was there ever a fix on this? I tried both approaches but neither allowed me to change my background colour. 🤔

If you share link to your site, I can take a look