Title appears when hover on blog summary block - Carousel

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; 
    } 
  }
   }}
 

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

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; 
    } 
  }
   }}
 

I 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

thank you! The password is: joyfilled 🙂 

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;
}

Oh thank you so much it worked!! i really appreciate this!!