adding image description overlay to mosaic grid in 7.1

I am on trial mode for 7.1. Current site is 7.0. I want a very specific thing. Which is gallery pages of images of my artwork in mosaic mode where the image description is on overlay on hover for each image and then i can click through to another page for each image where you cna see deatils shots and more info etc. 

I can;t do the overlay feature and it is making me insane

Try this guide.

I found code in another post but when I add it it doesn't change anything. Maybe I am not adding it n the right place? 7.1 is challenging! This was the code I found elsewhere:

.tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-overlay, .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text {
  opacity: 1 !important;
}

15 hours ago, tuanphan said:

Try this guide.

! I tried entering it in the Design section under "custom CSS" but it did not work. It moves the caption and flashes an overlay as soon as I enter the code but then when I save and look, the caption does not appear anywhere. What am I doing wrong?

basically afterI entered this code...the caption just flashes for a sec but when I test the site it isn't visible at all.

figure.gallery-grid-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-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-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-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Can you share site url? We can check easier

On 11/21/2020 at 7:25 PM, tuanphan said:

Can you share site url? We can check easier

I am working in a trial first to see if I can create the design I want before I commit to switching to 7.1. So I have no URL to share

I'm not sure what to do here to see if this will work if I can't share the url in trial mode

You can duplicate the site & share duplicated site url

I got this problem solved by entering code as follows:

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    background: rgba(255,255,255,0.5);
    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-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-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-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}