How do I add a hover effect for captions on my home page gallery?

Site URL: https://thepiewitch.com/

Hello, 

I have the template Tresoire, which has a large grid: masonry format on the home page. I chose the template for this photo/gallery design because I liked the simplicity. The template only allows the captions of the images to be below the image, which on mobile looks horrible. Plus, I only plan to add caption to some of the photos, so the inconsistency of the text below looks weird.

I would like to add a hover effect to the photos so that when people see the photo they know what the product is. Is there a way to be able to do it with this template?

Hover image > Show title. You mean this?

I have this same question (for 7.1)

But hover image > show caption/description

(with the caption being otherwise unseen)

Any ideas?

Thank you!

On 10/24/2020 at 3:53 PM, tuanphan said:

Hover image > Show title. You mean this?

Showing title isn't an option showing. Looking for I believe what Blakefair above what saying. 

hover image > show caption/description

I also have version 7.1. 

Can you add image caption first? We can check easier.

On 10/28/2020 at 4:54 AM, tuanphan said:

Can you add image caption first? We can check easier.

Yes I added image caption to the page so you can see! Thank you for looking into this for me! 

12 hours ago, anwyatt said:

Yes I added image caption to the page so you can see! Thank you for looking into this for me! 

Add to Home > Design > Custom CSS

/* gallery Hover effect */
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}