Jump to content

Title appears when hover on blog summary block - Carousel

Recommended Posts

Posted

Site URL: http://dragonfly-drum-g8n7.squarespace.com

hello! I am trying to get the title of the blog posts to appear on hover when I include a summary block on a landing page. I found a tutorial and copied the code however the title doesnt appear only on hover, it is fixed there.

 this is my code:

 @media screen and (min-width:800px) {#block-yui_3_17_2_1_1633664426986_16015 { 
  .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-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt {
      color: #FEFCE3!important; 
      font-family: Libre Baskerville;
      font-size: 13px
    }
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(70%);  
      filter: brightness(70%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
  }
   }}
 

866222398_ScreenShot2021-10-13at3_22_19pm.thumb.png.8caef7596c2a514addff26e03a83f6c8.pngI have also attached a screenshot.

This is my first time posting for help so I  hope I am doing the right thing!

I have a password on my website but not sure if i should paste that on here or not!

thank you!

  • Replies 4
  • Views 589
  • Created
  • Last Reply
Posted
5 minutes ago, Jules_Designsthings said:

Site URL: http://dragonfly-drum-g8n7.squarespace.com

hello! I am trying to get the title of the blog posts to appear on hover when I include a summary block on a landing page. I found a tutorial and copied the code however the title doesnt appear only on hover, it is fixed there.

 this is my code:

 @media screen and (min-width:800px) {#block-yui_3_17_2_1_1633664426986_16015 { 
  .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-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt {
      color: #FEFCE3!important; 
      font-family: Libre Baskerville;
      font-size: 13px
    }
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(70%);  
      filter: brightness(70%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
  }
   }}
 

866222398_ScreenShot2021-10-13at3_22_19pm.thumb.png.8caef7596c2a514addff26e03a83f6c8.pngI have also attached a screenshot.

This is my first time posting for help so I  hope I am doing the right thing!

I have a password on my website but not sure if i should paste that on here or not!

thank you!

You can set the protected password  and share it for us to check together

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Posted
On 10/13/2021 at 12:11 PM, Jules_Designsthings said:

thank you! The password is: joyfilled 🙂 

Don't remove above code. Add this to Design > Custom CSS

/* Summary title on hover */
div#block-yui_3_17_2_1_1633664426986_16015 .summary-title {
    opacity: 0;
}
div#block-yui_3_17_2_1_1633664426986_16015 .summary-item:hover .summary-title {
    opacity: 1;
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.