Timothy's Dev Stuff

Timothy's Dev Stuff

A collection of code snippets and other developer things.

Use CSS isolation and inset for an Image Overlay

This CSS was shown in detail on Kevin Powell’s YouTube channel. Using ::after pseudo-class on the element in combination with the isolation and inset properties, an adjustable opaque overlay is created. An example is in his CodePen below as well as the YouTube video. Below the video, I have a copy of the code in case the CodePen or YouTube video are lost.

See the Pen Low opacity bg-image by Kevin (@kevinpowell) on CodePen. 

<div class="low-opacity-bg-image">
  <h1>Background image opacity?</h1>
  <p>It's possible! ... sort of</p>
</div>
.low-opacity-bg-image {
  --bg-image: url("https://images.unsplash.com/photo-1656860444750-dd91d7fecfc7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTkzODA1OTA&ixlib=rb-1.2.1&q=80");
  --bg-image-opacity: 0.25;

  display: grid;
  place-content: center;
  text-align: center;
  min-height: 500px;

  position: relative;
  isolation: isolate;
}

.low-opacity-bg-image::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: var(--bg-image-opacity);

  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}

/* other styling */

body {
  font-family: system-ui;
  font-size: 1.5rem;
}