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

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!

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.

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?

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!

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.

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. 

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

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

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

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.

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?

On 3/7/2021 at 2:17 AM, tuanphan said:

Hi. It looks like you solved?

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.

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.

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!

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!

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

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.

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.

Can you share link to page?