Jump to content

Custom hover effect working for image but stops when hovering over the overlayed text. How can I fix this?

Recommended Posts

Posted (edited)

I have been looking for a way to allow the hover effect to still work when it hovers over the text and not just the image.

The Site URL is this: https://www.thesqinstitute.com/interactive-labs

Here is the code I'm using on the page.

<style>

  .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
  
    transition : 0.4s;
    
    }
    
  .sqs-block-image:hover .design-layout-fluid .fluid-image-container .content-fill img {
  
    opacity : 0.5;
    transform : scale( 1.1 );
    
    }
    
  </style>

 

Edited by rpzn6171
Adding Site URL
  • rpzn6171 changed the title to Custom hover effect working for image but stops when hovering over the overlayed text. How can I fix this?
  • Replies 1
  • Views 190
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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.