Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 5 weeks later...

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!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...