Jump to content

Summary Block Image Thumbnail Positioning

Recommended Posts

Hi there! 

I've used some coding to achieve a list layout, but am having trouble positioning the thumbnail where I need it to be without it changing position vertically when the screen changes size. 

https://violin-halibut-2csa.squarespace.com/list

Anyone able to help with a code to make it stay in place, below the growing line when hovered? 

Thank you 

 

This is the code I'm playing around with no success: 

//**PROJECT SUMMARY LIST IMAGE APPEAR ON HOVER**/
#block-yui_3_17_2_1_1697462333736_27194 .summary-item:hover img {
    opacity: 1!important;
    transition: opacity 0.4s ease-in-out,!important; 
  visibility: visible!important;
  pointer-events: none!important;
}


#block-yui_3_17_2_1_1697462333736_27194 .summary-item img {
  opacity: 0!important;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out,!important; 
  border: 1px solid #191918;
  pointer-events: none!important;
}

#block-yui_3_17_2_1_1697462333736_27194.summary-thumbnail img {
  visibility: hidden!important;
   pointer-events: none!important;
}

#block-yui_3_17_2_1_1697462333736_27194.summary-thumbnail:hover img {
  visibility: hidden!important;
   pointer-events: none!important;


}

/******IMAGE POSITIONING******/
/* Excerpt styles */


#block-yui_3_17_2_1_1697462333736_27194
.summary-excerpt {
    position: relative;  
}
#block-yui_3_17_2_1_1697462333736_27194
.summary-excerpt p {
  font-size: 0.8rem !important;

}

#block-yui_3_17_2_1_1697462333736_27194 .summary-item {
    display: flex!important;
    align-items: center; /* This aligns children (like your image and title) vertically in the middle */
}

.summary-thumbnail-container {
    position: absolute; /* Or you can remove this if it's not absolutely positioned within .summary-item */
    left: 20px!important; 
  top: 195px;
  
}

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.