Creating an overlay in CSS

Need for overlay

• When we have an image and when we place text over it the text will not be vsisble correcly to avoind this behaviour we use overlay

Creating an overlay in CSS

• To create an overlay we use two pseudo element after and before

• Remember both pseudo element will have a content property , the as these pseudo elements the job of this class is to add elements before and after

• While creating on overlay we are going to keep this content propety as empty

Should we use both before and after or one is okay

• If we dealing with only one layer of overlay then we need to use only one psuedo element

• If we need two layers then that is one behind the image and one over the image to add text we use aboth after and before , after will add overlay after the element for the text and before will add overlay before the image or behind the image

Inset

• The inset property in CSS is simply a shorthand for the four positioning properties:

    top, right, bottom, left
  

• What inset Does

  inset combines those four into one clean line.

  ✅ Example 1 — Full shorthand

    position: absolute;
    inset: 10px 20px 30px 40px;
  

• This expands to 👇

    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 40px;
  

  ---

• Different Value Patterns

  Like margin or padding, inset accepts 1 to 4 values:

  | Syntax | Equivalent | Meaning | | --- | --- | --- | | inset: 10px; | top: 10px; right: 10px; bottom: 10px; left: 10px; | All sides equal | | inset: 10px 20px; | top/bottom: 10px; left/right: 20px; | Two-value pattern | | inset: 10px 20px 30px; | top: 10px; right/left: 20px; bottom: 30px; | Three-value pattern | | inset: 10px 20px 30px 40px; | top: 10px; right: 20px; bottom: 30px; left: 40px; | Full four-value pattern |

  ---

  💡 Common Use

  • You’ll often see:

    inset: 0;

• which is shorthand for:

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

• ✅ This makes the element fill its parent completely — perfect for overlays, modals, or background effects.

---

🧠 Quick Summary

---

Creating a simple overlay

.hero {
  position: relative;
  height: 400px;
  background: url('image.jpg') center/cover no-repeat;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Single-layer overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Bring text above overlay */
.hero h1 {
  position: relative;
  z-index: 1;
}

Creating multi - layer overlay

🖼️ Two-Layer Overlay in CSS

A two-layer overlay uses both pseudo-elements — ::before and ::after — to stack two transparent visual layers on top of a background (image, video, or gradient).
Each layer serves a different purpose:

• One is usually a base tint or darkener for clarity.

• The other adds color, lighting, or gradient for depth or style.

---

✅ Example Setup

HTML

<div class="hero">
  <h1>Explore the World 🌍</h1>
</div>

CSS

.hero {
  position: relative;
  height: 500px;
  background: url("mountains.jpg") center/cover no-repeat;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* --- Layer 1: Base Dark Overlay --- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* dark tint for readability */
  z-index: 1;
}

/* --- Layer 2: Accent Gradient Overlay --- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(0, 123, 255, 0.35),
    rgba(255, 255, 255, 0.05)
  );
  z-index: 2;
}

/* --- Text Above All Layers --- */
.hero h1 {
  position: relative;
  z-index: 3;
  font-size: 2.5rem;
}

✅ Result:

• The first overlay darkens the image.

• The second adds a diagonal blue highlight.

• The text remains crisp on top.

---

🎨 Layer Breakdown

---