Jump to content

Having trouble with my hover code

Recommended Posts

Hi. I'm new to squarespace and coding, so I've been following some tutorials online in order to make my ideas come true. Sadly, I was trying one code in specific to make summary carousel block's text appear in the middle and only when I pass over with my mouse, but the text keeps appearing anyways.

So I'd like to be able to change that, can someone help me change the code to fit into what I want?

This is the code I'm currently using:

 

#block-yui_3_17_2_1_1692693625663_8553 {
  .summary-item {  
    position: relative;

    img {    
      transition: all .5s ease!important;  
    }   
    .summary-content {   
      position: absolute;  
      color: #fff!important;     
      top: 50%;  
      left: 50%;  
      opacity: 0;   
      pointer-events: none;
      transition: all .5s ease;   
      transform: translate(-50%, -50%);  
      -webkit-transform: translate(-50%, -50%);  
      -ms-transform: translate(-50%, -50%);  
      -moz-transform: translate(-50%, -50%); 
    }  
    .summary-thumbnail-container {
      margin-bottom: 0!important;
    }
    .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt   {
      color: #fff!important;  
    }
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);  
    }   
    .summary-content {   
      opacity: 0; 
    } 
  }
}

 

(password to view the website: sogetur)

Link to comment
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

For the text you probably want to use this as the selector:

.sqs-block-summary-v2 .summary-content

You seem to have the opacity set the wrong way compared to your description. You are trying to set the content opacity to zero on hover.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

if you don't mind, where would I place that selector specifically? About the opacity, I just copied literally the code and somehow it worked on the guy's website and not on mine. I've been testing several things, changing the numbers, but nothing happens

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.