DEV Community

Nguyễn Hữu Hiếu
Nguyễn Hữu Hiếu

Posted on

3 3

css overlay: create an overlay with opacity without affecting content inside the overlay

Problem

  • Create an overlay with opacity => content inside it also opacity
  • Want to ignore opacity on content inside the overlay

Solution

<div class="wrapper">
  <div class="overlay overlay-black">
    <h2>Hi Jisoo</h2>
  </div>
  <img src="https://image.thanhnien.vn/w2048/Uploaded/2021/wsxrxqeiod/2021_12_24/blackpink-1-6772.jpg" alt="testpic">
</div>
Enter fullscreen mode Exit fullscreen mode
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}

.overlay-black {
  // css for content inside overlay
  background: rgba(0,0,0,0.1);
  color: white !important;
}

.wrapper:hover .overlay-black {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more