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

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

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

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!

Screen Shot 2020-10-06 at 12.15.06 PM.png

Screen Shot 2020-10-06 at 12.15.17 PM.png

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

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

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

 

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

Create an account or sign in to comment

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


×
×
  • Create New...