Summary Block Title and Excerpt Overlay on Hover

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>

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

Hi,
Please check this extension. You can make like this demo without codin

In the video I showed how to make a summary like that demo page.
 

Please use the like button if it helps you!

Best,
Leopold

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

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?

On 9/24/2020 at 5:46 PM, rwp said:

.summary-title a

you are missing the link element

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

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?

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?

 

I did actually solve this finally! 
 

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

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?

9 hours ago, tuanphan said:

Do you use Business or Commerce plan?

Business plan 

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

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

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

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?

Everything seems to be working fine but I cant for the life of me figure out how to fade to white INSTEAD of black...

I am referring to the "featured stories" on my homepage.

www.manningavenue.ca

Can someone help?

13 hours ago, dove_rose said:

Everything seems to be working fine but I cant for the life of me figure out how to fade to white INSTEAD of black...

I am referring to the "featured stories" on my homepage.

www.manningavenue.ca

 

Can someone help?

You mean change text + border color to white?

On 9/23/2020 at 10:12 PM, rwp said:

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

Hi! I know it's been a while since this thread started, but hoping to troubleshoot.

I entered this code along with that of the OP above - looking to get the excerpts overlay to pop up on mouse hovering over the carousel summary block images - but the effect is a bit broken (tried the same with NinjaKit extension that someone offered elsewhere in this thread, and similar problems occurred).

(My site: paddlebridge.com/pbtours)

I'm uploading screenshots of what happens when I scroll over each image (all text is centered; text for the left-most appears behind the center image; text for center and right-most images appears over center image)...
I checked other custom coding I've added but I don't *think* there's anything that should be interfering with this block; there's code for customizing the left-right paging arrows but I don't see how that would mess with the summary block below... Could it be an incompatibility issue with my Mojave SqSp. template? A mystery for the ages. 

Cheers!
 

@rwp tagging you as I have no idea if comments on resolved threads keep notifying people... If you see my last comment, I wonder if it makes any sense?

1 hour ago, PaddleBridgeKayakTours said:

I have no idea if comments on resolved threads keep notifying people

Notifications are generated for any activity in a thread.