Jump to content

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
  • Views 548
  • Created
  • Last Reply
  • 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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.