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 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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