Summary Block 7.1 - Hover Title

AltitudeDesign · April 21, 2022

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

Edited April 21, 2022 by AltitudeDesign
wrong links

Beyondspace · April 21, 2022

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?

AltitudeDesign · April 21, 2022

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

tuanphan · April 24, 2022

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

AltitudeDesign · April 24, 2022

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

Edited April 24, 2022 by AltitudeDesign

AltitudeDesign · April 26, 2022

@tuanphan Are you able to help at all? 🙏

AltitudeDesign · April 26, 2022

OK I think I have solved it myself. Here is my code if anyone needs help with this in the future:

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

}

.summary-item .summary-content {
    background: rgba(254,237,0,0);
   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:25px !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 · April 29, 2022

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?

BridgetKelley · April 29, 2022

Hello can you share how you solved this??

AltitudeDesign · April 29, 2022

38 minutes ago, BridgetKelley said:

Hello can you share how you solved this??

Please look here for the solution -

BridgetKelley · April 29, 2022

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

}}

tuanphan · May 1, 2022

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

zoester300 · July 11, 2022

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?

tuanphan · July 11, 2022

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?

zoester300 · July 13, 2022

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!

CynVBB · August 13

@tuanphan or others

I've tried this code and it seems to work great in the editor preview, but when I load the live page into a Chrome browser, the blog titles are visible before hover. Can you suggest a solution to make sure the titles are only visible upon hover?

Testing on this page: https://wireframehq.com/testing

Edited August 13 by CynVBB

tuanphan · August 15

On 8/13/2024 at 8:27 PM, CynVBB said:

@tuanphan or others

I've tried this code and it seems to work great in the editor preview, but when I load the live page into a Chrome browser, the blog titles are visible before hover. Can you suggest a solution to make sure the titles are only visible upon hover?

Testing on this page: https://wireframehq.com/testing

I see it already worked

Summary Block 7.1 - Hover Title

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

AltitudeDesign

zoester300

Posted Images

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources