Hi there,
try this CSS:
#wpsp-13152 .wp-show-posts-inner {
position: relative;
}
#wpsp-13152 .wp-show-posts-entry-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: rgba(0,0,0,0); /* Set image overlay */
transition: background-color 0.2s ease-in;
}
#wpsp-13152 .wp-show-posts-inner:hover .wp-show-posts-entry-header {
background-color: rgba(0,0,0,0.45); /* Set image overlay hover */
}
#wpsp-13152 .wp-show-posts-image {
margin-bottom: 0;
}
#wpsp-13152 .wp-show-posts-image img {
vertical-align: bottom;
}
#wpsp-13152 .wp-show-posts-entry-header a {
color: #fff; /* set title text */
}
It applies specifically to the WPSP Grid on your home page which has the ID of 13152
I added an overlay to the image as well. Commented above where you change the overlay and text colors.