Text and overlay to appear on hover

Hello guys,

On the image blocks, I have written the title text for each. Please help with the code to

1. Hide the text on overview
2. Text should only appear on hover and cantered.

The link:

https://www.ptphotography.com/shop

password: ptphoto

Lastly, I would like to have a soft blue overlay on the images upon hover. So the idea is, if I hover on one image, the text + blue overlay shall appear. I would like it to have the same effect as this page:

https://www.ptphotography.com

Thank you in advance.

Best regards,
P

Try this:

.image-title {
    display: none;
}

.intrinsic:hover + .image-card-wrapper .image-card .image-title {
    display: inline;
}

.intrinsic:hover .image-overlay {
    opacity: .44;
    background: lightblue;
}

@loueeze It did work! Thanks a lot 🙏

One last favour please, how do I center the titles?

Sorry @Ptphotography I missed that bit! Add this to your custom CSS also:

.image-block-poster-text-alignment-left .sqs-block-image .design-layout-poster .image-card > * {
    text-align: center !important;
}