MoltoBello

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>