Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Finally figured it out and it's working now: #recent-projects{   .summary-item {       position: relative;     img {           transition: all .5s ease!important;       }        .s

Posted Images

  • Susana_SQSP changed the title to Squarespace 7.0 site -- clickable images on blog Summary
On 3/4/2021 at 11:23 PM, ratkaj said:

This section on the homepage (#block-yui_3_17_2_1_1614798777693_7724) @tuanphan

301179934_ScreenShot2021-03-04at10_22_57AM.thumb.png.dffc9ff6dba60d6616322a88024b986d.png

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

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

Okay. If you have any other questions, just reply to this topic. We will help.

I see some pages look long on mobile. You should consider adding a back to top button.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...