Summary Block 7.1 - Hover Title

Site URL: http://graphicstructures.squarespace.com

If you look at this page I have managed to give the blog masonry a hover title and yellow overlay - http://graphicstructures.squarespace.com/ (pass: preview)

I am trying to replicate this on a summary block on this page. I am nearly there but it's a bit buggy, isn't working well on mobile and also there is an odd white space under the images?

http://graphicstructures.squarespace.com/projects (pass: preview)

Here is the code I'm currently toying with:

.summary-item img {
    transition:all .1s ease !important;
}
.summary-item .summary-content  {
    display: flex;
    place-items: center;
    justify-content: center;
  
}

.summary-item .summary-content {
    background: rgba(254,237,0,.9);
  width:100%;
  height:100%;
    position: absolute;
    color: #fff !important;
    top: 50%;
    left: 50%;

    opacity: 0 !important;
    pointer-events: auto;
    transition: all .1s ease;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%)
}

 .summary-item .summary-title,  .summary-item .summary-metadata--primary,  .summary-item .summary-metadata--secondary.summary-item .summary-excerpt {
    color: #000 !important;
   font-size:20px !important;
    text-align:center !important;
   background-color: rgba(3,255,255,0) !important;


}

.summary-item:hover .summary-content {
    opacity:1 !important;
      
}


.summary-title a:after {
  content:'';
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

}
.summary-item {
  overflow:hidden !important;
}

6 minutes ago, AltitudeDesign said:

Site URL: http://graphicstructures.squarespace.com

 

If you look at this page I have managed to give the blog masonry a hover title and yellow overlay - http://graphicstructures.squarespace.com/projects (pass: preview)

I am trying to replicate this on a summary block on this page. I am nearly there but it's a bit buggy, isn't working well on mobile and also there is an odd white space under the images?

http://graphicstructures.squarespace.com (pass: preview)

Here is the code I'm currently toying with:

 

.summary-item img {
    transition:all .1s ease !important;
}
.summary-item .summary-content  {
    display: flex;
    place-items: center;
    justify-content: center;
  
}

.summary-item .summary-content {
    background: rgba(254,237,0,.9);
  width:100%;
  height:100%;
    position: absolute;
    color: #fff !important;
    top: 50%;
    left: 50%;

    opacity: 0 !important;
    pointer-events: auto;
    transition: all .1s ease;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%)
}

 .summary-item .summary-title,  .summary-item .summary-metadata--primary,  .summary-item .summary-metadata--secondary.summary-item .summary-excerpt {
    color: #000 !important;
   font-size:20px !important;
    text-align:center !important;
   background-color: rgba(3,255,255,0) !important;


}

.summary-item:hover .summary-content {
    opacity:1 !important;
      
}


.summary-title a:after {
  content:'';
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

}
.summary-item {
  overflow:hidden !important;
}

Do you mean reducing these space between items?

On mobile, when I touch and hold for a second, this overlay appear. Is it different when acting on your device?

I am sorry to confuse you. 

I want this page - http://graphicstructures.squarespace.com/projects

and the way the overlays work to look like this page - http://graphicstructures.squarespace.com

On 4/21/2022 at 10:37 PM, AltitudeDesign said:

I am sorry to confuse you. 

I want this page - http://graphicstructures.squarespace.com/projects

and the way the overlays work to look like this page - http://graphicstructures.squarespace.com

 

 

Remove "Overlay Color code in your above code" & use this code to add yellow overlay

a.summary-thumbnail-container.sqs-gallery-image-container:after {
    content: "";
    background-color: rgba(254,237,0,.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after {
    opacity: 1;
}

9 hours ago, tuanphan said:

Remove "Overlay Color code in your above code" & use this code to add yellow overlay

a.summary-thumbnail-container.sqs-gallery-image-container:after {
    content: "";
    background-color: rgba(254,237,0,.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after {
    opacity: 1;
}

 

Thank you for your reply mate

Still not acting right, I hope you can help further?

https://graphicstructures.squarespace.com/projects (pass: preview)

There is still this odd gap underneath and also you are only able to click on the title not the whole box? Here is the code I am using now:

.summary-item .summary-content  {
    display: flex;
    place-items: center;
    justify-content: center;
  
}

.summary-item .summary-content {
    background: rgba(254,237,0,.9);
   position: absolute;
  width:100%;
  height:100%;
   
    color: #fff !important;
    top: 50%;
    left: 50%;

  
    opacity: 0 !important;
    pointer-events: auto;
    transition: all .1s ease;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%)
}

 .summary-item .summary-title,  .summary-item .summary-metadata--primary,  .summary-item .summary-metadata--secondary.summary-item .summary-excerpt {
    color: #000 !important;
   font-size:20px !important;
    text-align:center !important;
   background-color: rgba(3,255,255,0) !important;


}

.summary-item:hover .summary-content {
    opacity:1 !important;
      
}


a.summary-thumbnail-container.sqs-gallery-image-container:after {
    content: "";
    background-color: rgba(254,237,0,.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after {
    opacity: 1;
}

@tuanphan Are you able to help at all? 🙏

On 4/26/2022 at 3:11 PM, AltitudeDesign said:

@tuanphan Are you able to help at all? 🙏

I see it looks fine to me. Did you solve it?

Hello can you share how you solved this??

38 minutes ago, BridgetKelley said:

Hello can you share how you solved this??

Please look here for the solution - 

@tuanphan can you take a look at my code for this, I'm trying to isolate this to one section and every time I put a media screen or the section id around this code, the summary block disappears. As you can see there is a summary block directly below this one and I do not want that one to be effected.

I'm also trying to place an offset outlined border in and I can not get that to show either.

Example of border is attached as well as screenshots of the Summary block without the Section isolated, and with the section isolated.

https://ck-option-1.squarespace.com/

CK2022!

Quote

//Summary Block Portfolio Hover - Home Page//

section[data-section-id="6266cd3f1220985d65614f2a"]{

.summary-item {
     display: flex;
    place-items: center;
    justify-content: center;
   position: relative;
  
  
 
  .summary-content  {
   position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0 !important;
    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-item .summary-title,  .summary-item .summary-metadata--primary,  .summary-item .summary-metadata--secondary.summary-item .summary-excerpt {
    color: #6A698F !important;
   font-size:25px !important;
    text-align:center !important;

}

.summary-item:hover .summary-content {
    opacity:1 !important;
  
      
}

a.summary-thumbnail-container.sqs-gallery-image-container:after {
    content: "";
    background-color: rgba(231,239,238,.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    
}

.summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after {
    opacity: 1;

  }}

On 4/29/2022 at 11:11 PM, BridgetKelley said:

@tuanphan can you take a look at my code for this, I'm trying to isolate this to one section and every time I put a media screen or the section id around this code, the summary block disappears. As you can see there is a summary block directly below this one and I do not want that one to be effected.

I'm also trying to place an offset outlined border in and I can not get that to show either.

Example of border is attached as well as screenshots of the Summary block without the Section isolated, and with the section isolated.

 

https://ck-option-1.squarespace.com/

CK2022!

 

 

It looks like you figured it out?

I see 1 summary only

Hi everyone, especially @tuanphan 🙂 I love this code but i want the title, excerpt and metadata to stack - at the moment they are placed next to each other on the same line - please can you help me?

6 hours ago, zoehoward said:

Hi everyone, especially @tuanphan 🙂 I love this code but i want the title, excerpt and metadata to stack - at the moment they are placed next to each other on the same line - please can you help me?

Can you share link to page where you use summary?

On 7/11/2022 at 4:50 PM, tuanphan said:

Can you share link to page where you use summary?

HI @tuanphan I have actually removed the hover now because I realise that most people will use the site on mobile so there's no point in it. But thank you for responding, i appreciate it very much!