Jump to content

Summary Block 7.1 - Hover Title

Go to solution Solved by AltitudeDesign,

Recommended Posts

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 by AltitudeDesign
wrong links
Link to comment
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?

image.png.05f437ea3df87003bc6504e54e4266a8.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 by AltitudeDesign
Link to comment
  • Solution

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;

}

 

Link to comment

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

  }}

 

Screen Shot 2022-04-29 at 12.07.27 PM.png

Screen Shot 2022-04-29 at 12.09.16 PM.png

Screen Shot 2022-04-29 at 12.09.53 PM.png

Link to comment
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!

 

 

Screen Shot 2022-04-29 at 12.07.27 PM.png

Screen Shot 2022-04-29 at 12.09.16 PM.png

Screen Shot 2022-04-29 at 12.09.53 PM.png

It looks like you figured it out?

I see 1 summary only

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.