Jump to content

Code for caption overlay

Go to solution Solved by paul2009,

Recommended Posts

Site URL: http://www.polymerventures.com/home-1

I would like to do the following with the caption overlays - site wide.

  • keep the background white
  • move captions to the top of the image blocks
  • make the text black 
  • decrease the padding 

I found all of the details in the inspector but I can't figure out the code to change them. 

Current code used:
/* Image Captions on Hover*/
.image-caption-wrapper {
min-height: 5%x;
display: flex;
justify-content: center; /*text align center*/
background: white!important; /* Background Overlay*/
}

Screen Shot 2021-01-13 at 7.35.30 AM.png

Link to comment
  • Solution
1 hour ago, abbydowning said:

I would like to do the following with the caption overlays - site wide.

  • keep the background white
  • move captions to the top of the image blocks
  • make the text black 
  • decrease the padding 

 

You can do this with the following CSS, added to Design > Custom CSS. The padding is shown as the current value (18px). You can adjust this to reduce the padding around the titles.

 

/* Captions on top, reduce padding */
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper {
    top:0; bottom: auto;
    padding: 18px;
}
/* Black captions */
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .image-caption-wrapper h1, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper h1, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .image-caption-wrapper h2, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper h2, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .image-caption-wrapper h3, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper h3, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .image-caption-wrapper strong, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper strong {
    color: #000;
}

 

7WmyBG9JTM.thumb.gif.96ba39f5680aaff4248b594295d789ae.gif
Effect of CSS when applied

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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...

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.