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

@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%; }

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!

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?

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

@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?

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

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

@HannahWestergaard yes, same here

@HannahWestergaard same here. Any luck figuring it out?

Same here. Hope someone can provide a fix.

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

@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

On 3/26/2020 at 2:38 AM, Glencairn said:

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

kathleenphelps Answered it above! Worked great for me!