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 comment

Recommended Posts

  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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