Jump to content

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

Recommended Posts

  • 1 month later...
16 hours ago, megan10 said:

How do I change change the hover overlay to cover the entire image and also center the text within in? 

Here's how to looks with the text at the bottom.

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
12 hours ago, rosebudphoto said:

Is there a way to make the overlay background transparent while keeping the text color? 

The statue photo is how I currently have it set, the pants photo is from a product page that I'm trying to replicate. 

 

Thanks!

Can you share link to page in screenshot? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
20 hours ago, LYDIAPALESCHI said:

How do I make the grey box transparent and get it to cover the whole image? I've added in the code mentions above but still isn't working. 

Can you share link to page in your question? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
2 hours ago, organic_emma said:

I've used this code which works but how can I change the opacity and keep the text still legible?
 

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

Use rgba background (a is opacity)

.image-caption-wrapper {
  background: rgba(79,77,86,0.5) !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Is there a way to hover over the image and that change the color of the caption?

I only know how to make the caption change to a different color if you hover over the captions themselves.

Ideally, I would love the users to be able to hover over either the image or the caption, and that triggers a secondary photo and a color change of the caption at the same time.

Can anyone help with this? Thank you! Link is here. Password is 185fff.

Link to comment
On 3/6/2021 at 3:08 AM, SSong said:

Is there a way to hover over the image and that change the color of the caption?

I only know how to make the caption change to a different color if you hover over the captions themselves.

Ideally, I would love the users to be able to hover over either the image or the caption, and that triggers a secondary photo and a color change of the caption at the same time.

Can anyone help with this? Thank you! Link is here. Password is 185fff.

Hi. It looks like you solved?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 3/10/2021 at 1:45 AM, SSong said:

No, I didn't. I want users to be able to hover over the circular image (NOT the caption) and the caption color will change to #0033a0.

The above url doens't exist.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

Hello, In the 7.0 Avenue template I'd like to make a few changes to the Caption Overlay on Hover with a regular Image block (not a gallery). I'd like to:

1)  change the background color from black to blue (#1043c6) and the text to white.

2) center the text.

3) reduce the amount of space above and below the text, so the overlay doesn't cover so much of the image.

Is any of this possible? 

Thank you!

Link to comment

Hello, In the 7.0 Avenue template I'd like to make a few changes to the Caption Overlay on Hover with a regular Image block (not a gallery). I'd like to:

1)  change the background color from black to blue (#1043c6) and the text to white.

2) center the text.

3) reduce the amount of space above and below the text, so the overlay doesn't cover so much of the image.

Is any of this possible? 

Thank you!

Link to comment
On 9/20/2023 at 6:35 AM, Pal1570048356 said:

Hello, In the 7.0 Avenue template I'd like to make a few changes to the Caption Overlay on Hover with a regular Image block (not a gallery). I'd like to:

1)  change the background color from black to blue (#1043c6) and the text to white.

2) center the text.

3) reduce the amount of space above and below the text, so the overlay doesn't cover so much of the image.

Is any of this possible? 

Thank you!

Can you share link to page? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

I've tried the code below, and it works for one image out of a group of 4 images ‚ÄĒ various sizes (see attached).

However, I would like to see code similar to this to work for the feature items on my homepage (see attached of desired effect to achieve with CSS):

/*Hover owerlay captions*/
.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: relative;
 pointer-events: none !important;
 background: #ffffff !important;
 opacity: .80 !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;
}

I realize this is an older post, but I'm hoping there's a solve for this.

Thank you.

OverlayOnHover.jpg

Link to comment
On 11/3/2023 at 9:44 PM, BradleyK said:

I've tried the code below, and it works for one image out of a group of 4 images ‚ÄĒ various sizes (see attached).

However, I would like to see code similar to this to work for the feature items on my homepage (see attached of desired effect to achieve with CSS):

/*Hover owerlay captions*/
.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: relative;
 pointer-events: none !important;
 background: #ffffff !important;
 opacity: .80 !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;
}

I realize this is an older post, but I'm hoping there's a solve for this.

Thank you.

OverlayOnHover.jpg

Can you share link to page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.