Jump to content

Squarespace 7.0 site -- clickable images on blog Summary

Recommended Posts

Site URL: https://schmidtlandscapeservices.squarespace.com/

Hi squarespacers -- 

I'm not sure if 7.1 has rotted my brain but I can't seem to figure out an issue in 7.0. I'm using a summary block to showcase some client case studies on their site (like a portfolio) but when I do so I can't get the images to be the link (only the title). How do I change the images to be clickable???

https://schmidtlandscapeservices.squarespace.com/

Password: 1234

 

Thanks!!

Link to comment
  • Replies 6
  • Views 471
  • Created
  • Last Reply
  • Susana_SQSP changed the title to Squarespace 7.0 site -- clickable images on blog Summary
1 hour ago, tuanphan said:

Hi. Which code did you use to add hover effect? I think we can need to tweak some in your code

Finally figured it out and it's working now:

#recent-projects{
  .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: auto;
      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: #fff!important; 
      text-align: center !important;
    }
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
  }}

Link to comment

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.