Overlay layer

It happens that you might want to have a layer that comes over the element content, it can be done with CSS ::before pseudo-element, however, it is a common use case, creating this layer each time is not a logical choice.
FlatifyCSS gives you a helper class called .overlay-layer, it does the same thing and you can just customize it easily without writing boilerplates.

Overlay layers have a couple of CSS variables to make them more flexible:

--flatify__overlay-layer-priority z-index property of the overlay layer, default is 10
--flatify__overlay-layer-bg-color By default inherits darker background color --flatify__overlay-layer-opacity Default is 1 which means 100%
--flatify__overlay-layer-blending-mode Default is normal
--flatify__overlay-layer-backdrop-filter Default is none

In the below example, we have a box with an image inside it, basically, we need an overlay layer to change image color with mix-blend-mode CSS property and add some effect with backdrop-filter CSS property.

index.html

<div class="my-img-fx">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-1 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-2 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-3 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-4 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-5 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-6 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-7 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

style.scss

.my-img-fx {
  overflow: hidden;
  width: 300px;
  height: 150px;
  margin: 0.5em;
  border-radius: 1em;
}
.my-img-fx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx-1 {
  --flatify__overlay-layer-bg-color: linear-gradient(to right, #2c5364, #203a43, #0f2027);
  --flatify__overlay-layer-blending-mode: overlay;
}

.fx-2 {
  --flatify__overlay-layer-bg-color: linear-gradient(to right, #8e2de2, #4a00e0);
  --flatify__overlay-layer-blending-mode: hard-light;
}

.fx-3 {
  --flatify__overlay-layer-bg-color: linear-gradient(to right, #f12711, #f5af19);
  --flatify__overlay-layer-blending-mode: multiply;
  --flatify__overlay-layer-opacity: 0.75;
}

.fx-4 {
  --flatify__overlay-layer-bg-color: rgba(255, 255, 255, 0.5);
  --flatify__overlay-layer-backdrop-filter: blur(3px) contrast(120%);
}

.fx-5 {
  --flatify__overlay-layer-bg-color: trasparent;
  --flatify__overlay-layer-backdrop-filter: contrast(400%) saturate(400%) grayscale(50%) sepia(50%) hue-rotate(10deg);
}

.fx-6 {
  --flatify__overlay-layer-bg-color: trasparent;
  --flatify__overlay-layer-backdrop-filter: sepia(75%) hue-rotate(-25deg);
}

.fx-7 {
  --flatify__overlay-layer-bg-color: trasparent;
  --flatify__overlay-layer-backdrop-filter: grayscale(100%) contrast(140%) brightness(85%);
}