AltitudeDesign's post in Summary Block 7.1 - Hover Title was marked as the answer
OK I think I have solved it myself. Here is my code if anyone needs help with this in the future:
.summary-item .summary-content {
display: flex;
place-items: center;
justify-content: center;
}
.summary-item .summary-content {
background: rgba(254,237,0,0);
position: absolute;
color: #fff !important;
top: 50%;
left: 50%;
opacity: 0 !important;
pointer-events: auto;
transition: all .1s ease;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform:translate(-50%, -50%)
}
.summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt {
color: #000 !important;
font-size:25px !important;
text-align:center !important;
background-color: rgba(3,255,255,0) !important;
}
.summary-item:hover .summary-content {
opacity:1 !important;
}
a.summary-thumbnail-container.sqs-gallery-image-container:after {
content: "";
background-color: rgba(254,237,0,.9);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after {
opacity: 1;
}