Image Blocks
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Image Block Elements | Refers to image blocks of all different layouts. |
CSS Code Snippets for Customizing Image Blocks
Set custom overlay opacity for poster images
//Start: Set custom overlay opacity for poster images
.sqs-block-image .design-layout-poster .image-overlay {
opacity: .5;
}
//End: Set custom overlay opacity for poster imagesRemove image overlays for all non-poster image blocks
//Start: Remove image overlays for all non-poster image blocks
.sqs-block-image .image-block-outer-wrapper:not(.design-layout-poster) {
.image-overlay, .fluidImageOverlay {
display: none;
}
}
//End: Remove image overlays for all non-poster image blocksAdd borders to image blocks images
This code snippet works on all image block images in the Classic Editor and works best on Fluid Engine images that are set to “Fill” (the “Fit” images will have a small empty space on the top and bottom of the image for some reason). It does NOT work on images that have a shape applied to them.
//Start: Add borders to image blocks (does not work if the image has a shape)
.fluid-image-container.sqs-image-content, .sqs-image-shape-container-element
{
border: 3px solid coral;
box-sizing: border-box;
}
//End: Add borders to image blocks (does not work if the image has a shape)Add a solid box-shadow to all image blocks
//Start: Image block solid box-shadow
.sqs-block-image .image-block-outer-wrapper {
box-shadow: 10px 10px #888888;
}
//End: Image block solid box-shadowAdd a blurred box-shadow to all image blocks
//Start: Image block solid box-shadow
.sqs-block-image .image-block-outer-wrapper {
box-shadow: 10px 10px #888888;
}
//End: Image block solid box-shadow