Miller Template Help - CSS code to change hover state and title font on landing page index: gallery image blocks

Site URL: https://hellobrittm.com

Hello!

I'm looking to customize the gallery within my landing page index on the Miller Template. I have two questions:

1. Is there a way to customize the hover effect for this specific gallery through CSS to make each image block to have a full color overlay with left-aligned caption text? I've tried customizing through >Site Styles>Index: gallery content, but there is not an option to achieve the 'caption on hover' effect as I can with other galleries.

2. I'm also trying to customize the gallery caption title typeface, but haven't landed on the correct code. Has anyone else had success with this coding? I did have one small win in managing to customize the caption body font! Here is some of the code options that I've been trying to achieve this index gallery title customization, all without success: 

@font-face {

    font-family: 'Bluu';

       src: url('https://static1.squarespace.com/static/533d5f26e4b02cbd82cf2d9e/t/5f5bb8563de338484186bc86/1599846486982/BluuNext-Titling.otf');

}

.sqs-block-image .image-caption p { font-family: "Bluu";}

.image-subtitle-wrapper * {
    font-family: 'Bluu' !important;}

.image-card-wrapper *
p { font-family: 'Bluu' !important;}
.sqs-gallery .meta-title {font-family:'Bluu'!important;}

.sqs-gallery .meta-description * p {font-family:'Bluu'!important;}

.gallery-grid-title h1{font-family:'Bluu'!important;}

I appreciate any help with this!

Brittany 

 Q1. Mobile uses this

a.Mobile-bar-branding {
    font-family: 'SyneExtra' !important;
}

Q2. Can you share link to gallery?

Thank you for responding! 

I'm still struggling to find the css code to change hover state and title font on landing page index: gallery content blocks. I'd like to customize the caption title typeface and have the caption appear only on hover. Can you help? 

I'm looking to update the index gallery on my landing page here: https://hellobrittm.com

Thank you!

3 hours ago, hellobrittm said:

Thank you for responding! 

I'm still struggling to find the css code to change hover state and title font on landing page index: gallery content blocks. I'd like to customize the caption title typeface and have the caption appear only on hover. Can you help? 

I'm looking to update the index gallery on my landing page here: https://hellobrittm.com

Thank you!

You mean top images?

For all images on the landing pages. I'd like the caption + overlay to appear on hover. 

15 hours ago, hellobrittm said:

For all images on the landing pages. I'd like the caption + overlay to appear on hover. 

Add to Home > Design > custom CSS

.Index-gallery-item-content.Index-gallery-item-content--has-title-and-body {
    opacity: 0;
    transition: all 0.5s;
}
article.Index-gallery-item:hover .Index-gallery-item-content.Index-gallery-item-content--has-title-and-body {
    opacity: 1;
}