Layer (is--layer)

is--layer is a class for creating overlay layers absolutely positioned on top of a parent element.

CSS

.is--layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

Using with Lism Components

A <Layer> component is available as an alias for <Lism isLayer>.

Import

import { Layer } from 'lism-css/react';

Usage

Example

↓

Example

BACKGROUND

Layer Contents…

<Box pos="relative" py="40">
  <Text fz="2xl" fw="bold" ta="center" lts="l" o="-30">
    BACKGROUND
  </Text>
  <Layer p="15" bgc="purple:10%">
    <p>Layer Contents...</p>
  </Layer>
</Box>

<div class="l--box -pos:relative -py:40">
  <p class="-fz:2xl -fw:bold -ta:center -lts:l -o:-30">BACKGROUND</p>
  <div class="is--layer -p:15 -bgc" style="--bgc: color-mix(in srgb, var(--purple) 10%, transparent)">
    <p>Layer Contents…</p>
  </div>
</div>

Using backdrop-filter

You can apply backdrop-filter via the style prop.

↓

Applying a blur to the background

BACKGROUND

<Box pos="relative" p="40">
  <Text fz="2xl" fw="bold" ta="center">
    BACKGROUND
  </Text>
  <Layer style={{ backdropFilter: 'blur(3px)' }} />
</Box>

↓

Adjusting the background color tone

Photo by xxxxxx

<Frame ar="2/1" pos="relative">
  <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
  <Layer style={{ backdropFilter: 'contrast(1.1) sepia(0.4) grayscale(0.4)' }} />
  <Text pos="absolute" b="0" r="0" p="20" lh="1" c="white" fz="xs" o="-10">
    Photo by xxxxxx
  </Text>
</Frame>

Media Layer

Here is a layout example using .is--layer to place an image as a background behind content.

↓

Example

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

<Box pos="relative" py="50" px="40">
  <Frame isLayer>
    <Media src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width="960" height="640" loading="lazy" decoding="async" />
  </Frame>
  <Layer bgc="black:50%" />
  <Stack pos="relative" g="30" c="white">
    <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
    </p>
  </Stack>
</Box>

<div class="l--box -pos:relative -py:50 -px:40">
  <div class="l--frame is--layer">
    <img src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" decoding="async" />
  </div>
  <div class="is--layer -bgc" style="--bgc: color-mix(in srgb, var(--black) 50%, transparent)"></div>
  <div class="l--stack -pos:relative -g:30 -c" style="--c: var(--white)">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi
      provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
    </p>
  </div>
</div>