How to Create an Overlay Effect with CSS

#html #css #webdev #tutorial

CSS doesn't provide a straightforward way to add an overlay effect. But, we can create one easily with only two main properties, namely, z-index and opacity. In this quick post, I will showing you how to create one.

What we need to do is just move the overlay div above your text or image, and then make it partially transparent so that the content behind is visible. First things first, I will add a overlay div and some text inside a wrapper. Like this:

<div class="overlay-box">
  <div class="overlay"></div>
  <h1>Text</h1>
</div>

Next, copy this CSS:

.overlay-box {
  position: relative;
  height: 200px;
  width: 400px;
}

.overlay {
  background: red;
  height: 100%;
  width: 100%;
  opacity: 0.7;  /* Must be translucent */
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: -1;  /* Your content must be under the overlay box */
}