Code for caption overlay

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;
}

Effect of CSS when applied