Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


HeartAndDash

Question

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!

Edited by HeartAndDash
Link to post
  • Answers 33
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

Recommended Posts

  • 5

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

Link to post
  • 2

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!

Link to post
  • 1

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

Link to post
  • 1

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

Link to post
  • 1

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

Edited by Evahill
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
Link to post
  • 0

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:

alt text

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:

alt text

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

screen-shot-2018-11-09-at-74651-pm.png.ef456074150577796eb41196b5f46d84.png

screen-shot-2018-11-10-at-21229-pm.png.1e322e3c3c8300f4835785f640f639c0.png

Link to post
  • 0

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

Edited by Evahill
Initial Revision
Link to post
  • 0
Guest

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

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

Link to post
  • 0
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;
}

 

Link to post
  • 0
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

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0
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!

Edited by joelyyael
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...