Caption hover on image: h4 visible before hover

Site URL: https://www.gerileung.com/

Hi! I'm customizing the caption hover on images but I'd like for the title of the caption to be visible only and then on the hover have the rest of the caption to appear. I thought I could target the h4 class directly and set visibility to visible but that didn't work. Is there another way to do this? See the attachments for what is on the site now and what I'd like to do. Thanks!

You want

Initial

• Show title
• Hide description
• Hide overlay

Hover

• Show title
• Show description
• Show red overlay

Is this right?

Can you share link to page where you use image? I don't see it on above link

On 4/29/2022 at 2:28 AM, tuanphan said:

You want

Initial

• Show title
• Hide description
• Hide overlay

Hover

• Show title
• Show description
• Show red overlay

Is this right?

Can you share link to page where you use image? I don't see it on above link

Hi Tuan! Yes that's right! I was able to add a coded title and maneuver it over the image so it shows all the time. But it's not a seamless experience and I run into formatting issues when scaling from desktop to mobile. I also want the red overlay to take up 100% of the image. Here's the page here: https://seattlelitigation.squarespace.com/professional-license-defense-2

Password: demo

Thank you for your help!

On 5/3/2022 at 6:21 AM, HeyItsGeri said:

Hi Tuan! Yes that's right! I was able to add a coded title and maneuver it over the image so it shows all the time. But it's not a seamless experience and I run into formatting issues when scaling from desktop to mobile. I also want the red overlay to take up 100% of the image. Here's the page here: https://seattlelitigation.squarespace.com/professional-license-defense-2

Password: demo

Thank you for your help!

Add to Design > Custom CSS

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

Hi Tuan! Thank you for providing this. It didn't quite work as I was envisioning. When I use this code, it runs into the title that I positioned over the photo. The client is fine with how the hover is right now (not reaching the top of the photo so it doesn't run into the title). I'll keep working on this but thank you for your help anyway!!

On 5/10/2022 at 10:03 PM, HeyItsGeri said:

Hi Tuan! Thank you for providing this. It didn't quite work as I was envisioning. When I use this code, it runs into the title that I positioned over the photo. The client is fine with how the hover is right now (not reaching the top of the photo so it doesn't run into the title). I'll keep working on this but thank you for your help anyway!!

I also want the red overlay to take up 100% of the image

The code will do this. Or you want to do this on mobile only?