Gallery Grid Hover Over

Site URL: https://magnolia-hawk-8wyh.squarespace.com/results

Hi! I am looking to get some help creating a hover over in a gallery grid. I've found some code from these forums that works , but I am having a hard time customizing what I want it to look like. Can someone help me get it where the first part is bolded with the subtitle smaller, regular and underneath? See attached image. It might be worth noting that have two fonts I'm using through CSS. When I started to try to add code it started messing with the stylizating of the fonts through the whole site. Thanks!

Website: https://magnolia-hawk-8wyh.squarespace.com/results
Password for site: thisisart

// Galler Image Hover in Desing > CSS//
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%;
    color: white;
    text-align: center; 
    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: #002554; /* 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.65;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

You can try to place html into the caption

<h2>Diligord</h2>
<p>Lorem ipsum</p>

btw, I got some gallery effect to choose if you like 

https://beyondspace7-1.squarespace.com/?password=1234

13 minutes ago, bangank36 said:

You can try to place html into the caption

<h2>Diligord</h2>
<p>Lorem ipsum</p>

btw, I got some gallery effect to choose if you like 

https://beyondspace7-1.squarespace.com/?password=1234

Thanks, @bangank36! These are cool. Is there a way to further customize it? When I put in the heading tags in the caption my blue heading doesn't show up on the dark overlay. I want this to be white and smaller, and I want the subtitle to be a bit bigger.

@bangank36: Is there a way to turn it off on mobile and provide another solution? It doesn't appear to be responsive. 

3 hours ago, mgwebsite said:

@bangank36: Is there a way to turn it off on mobile and provide another solution? It doesn't appear to be responsive. 

You are asking about your original code snippet? how it looks on mobile now?