Jump to content

Title appears when hover on blog summary block - Carousel

Recommended Posts

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!

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.