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

Summary Block Title and Excerpt Overlay on Hover


MoltoBello

Question

Site URL: https://lakerenfaire.com/virtual-faire-invite

Good Evening Squarespacers!

I am working on a gradient overlay for a grid summary block and have successful positioned the Title and Excerpt over the images in the summary block. I cannot seem to get them to display on hover, however, and the website only displays the gradient and transition, but not the text. I feel like this is close but I am missing something. 

 

Here is my code:

<!-- Rollover Image Effect -->
<style>
  .summary-item img{position: relative; transition: all .5s ease!important;}
  
  .summary-content {
  	position: absolute;
    color: #ffffff !important;
    top: 50%;
    left: 50%;
    opacity: 0;
      pointer-events: none;
      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: #fffff !important;}
  
  .summary-item:hover img{-webkit-filter: brightness(50%); filter: brightness(50%);}
  
  .summary-content:hover {opacity: 1 !important;}
</style>

 

Link to comment

14 answers to this question

Recommended Posts

  • 0
On 9/25/2020 at 4:58 AM, MoltoBello said:

@rwp That worked! I knew I was close. My title .summary-title tags are still not changing to white though even with the color set with important tag.

I see white text here. Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 3/10/2021 at 12:13 AM, ratkaj said:

I know this has been solved but I'm in the same situation and I'm stuck on the link part. Can you clarify the .summary-title a element that is missing?

 

Site: 
https://schmidtlandscapeservices.squarespace.com
Password: 1234

Hi. Do you still need help on this?

Also I see some pages on mobile have very long content. You should consider adding a back to top button.

On tablet, do you want to change to 2 items/row?

image.thumb.png.efbb6dbc46572f80df75c72beb3cc380.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 3/21/2021 at 6:56 AM, ratkaj said:

I did actually solve this finally! 
 

yes, I actually would like to change that to 2 column (good call)!

Do you use Business or Commerce plan?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@MoltoBello I know it's been a while. But I am looking for text over image summary to act like a button.

Can someone list the complete code? and tell me where to put it? This would change my life!

I didn't understand where to add the code @rwp added.

------and what class to use to style it!

Edited by kakers
Link to comment
  • 0
On 8/9/2021 at 11:06 AM, kakers said:

@MoltoBello I know it's been a while. But I am looking for text over image summary to act like a button.

Can someone list the complete code? and tell me where to put it? This would change my life!

I didn't understand where to add the code @rwp added.

------and what class to use to style it!

Can you share link to page where you added summary block? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/10/2021 at 8:53 PM, Rolaa said:

I am stuck with this too: how do I add the title to the images on hover? And how does the opacity go to white (rather than dark)? 

This is the page: https://www.thecarolamoon.com/case-studies

You mean summary under Client Experiences?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...