Jump to content

image card hover overlay breaks with hyperlinks

Recommended Posts

Site URL: https://www.stonewoodny.com/home-test

Hi all! I have been trying to create a custom css code that would allow these 3 images on my home page to dim on hover and have the image-subtitle come up on hover. So far my code works with that! However my image-subtitle code has links to other pages, once I hover over the hyperlinks it breaks the background image's overlay opacity hover effect.

Also ideally the image would function like the image attached. The main title would be constant on the image centered, once hovering over the image a darker background comes through and dims the image making the text pop more, the subtitle links would appear and be clickable. Also having the subtitle links closer to the bottom would be nice, but whenever I code "margin-bottom: 0%!important;" or anything of that matter, it doesn't work. I'm happy to explain more and welcome any help or advice!! Thank you, here is my custom code so far: 

 

<style>
.light .sqs-block-image .design-layout-poster .image-overlay{
      opacity: .2;
}

.light .sqs-block-image .design-layout-poster .image-overlay:hover{
      opacity: .8;
  transition-duration: .5s;
}

  .image-subtitle-wrapper {
    opacity: 0;
    pointer-events: none;
  }

/* this is a current workaround to view the subtitle text, but I would rather have the whole image have an overlay */
  .image-subtitle-wrapper a{
  padding: 2px 6px 7px 6px;
  border-radius: 2px;
}

  .image-subtitle-wrapper:hover {
   background-color: rgba(52, 44, 39, .8)
}


/* show subtitle on hover */

.image-block:hover .image-subtitle-wrapper {
    opacity: 1;
    transition-duration: 0.5s;
}

</style>

 

Screen Shot 2022-02-08 at 6.02.19 PM.png

Link to comment
  • Replies 0
  • Views 220
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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.