Jump to content

Caption hover on image: h4 visible before hover

Recommended Posts

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!

Screen-Recording-2022-04-26-at-12.24.gif

Screen-Recording-2022-04-26-at-12.34.gif

Link to comment
  • Replies 5
  • Views 365
  • Created
  • Last Reply

Top Posters In This Topic

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!

Link to comment
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;
}

 

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

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

Link to comment
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?

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.