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
Go to solution Solved by rwp,

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 Exce

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

Posted Images

10 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?

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

 

Link to post
  • 0
16 hours ago, tuanphan said:

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

 

I did actually solve this finally! 
 

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

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

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