Text with a fading black overlay

Question

Text with a fading black overlay

I am seeking to develop a unique transparent overlay effect for a div that includes text. The objective is to have the overlay fade in and out upon activation by pressing a button. Traditionally, this can be achieved by placing a div within another div with absolute positioning and full width/height, adjusting the opacity using an ease or animation (Black transparent overlay on image).

However, I also require the ability to select the text within the div. Switching the overlay from

display: block

to

display: none

Will disrupt the fading animation. How can I smoothly transition from block to none so that I can recycle my underlying div?

css animation display

Answer 1

Answer №1

If you're familiar with jQuery, this code snippet may be just what you need:

$(document).ready(function() {
  $("#popupbtn").click(function() {
    $(".overlay").fadeIn(1000);
    $(".overlay").css("display","block");
  });
  $("#close").click(function() {
    $(".overlay").fadeOut(1000);
    //$(".overlay").css("display","none");
  });
});

body,
html {
  margin: 0;
  padding: 0;
 }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: RGBa(0,0,0,0.5);
  display: none;
}
.popup {
  background: green;
  width: 200px;
  height: 200px;
  display: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="popupbtn">click me</button>
<div class="overlay">
  <div class="popup">
    <p>popup text</p>
    <button id="close">close</button>
  </div>
</div>

Explanation: Once the $(".overlay").fadeIn(1000); animation finishes, the CSS for display: block will take effect.

I hope this solution proves helpful!

Answer 2

If you're familiar with jQuery, this code snippet may be just what you need:

$(document).ready(function() {
  $("#popupbtn").click(function() {
    $(".overlay").fadeIn(1000);
    $(".overlay").css("display","block");
  });
  $("#close").click(function() {
    $(".overlay").fadeOut(1000);
    //$(".overlay").css("display","none");
  });
});

body,
html {
  margin: 0;
  padding: 0;
 }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: RGBa(0,0,0,0.5);
  display: none;
}
.popup {
  background: green;
  width: 200px;
  height: 200px;
  display: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="popupbtn">click me</button>
<div class="overlay">
  <div class="popup">
    <p>popup text</p>
    <button id="close">close</button>
  </div>
</div>

Explanation: Once the $(".overlay").fadeIn(1000); animation finishes, the CSS for display: block will take effect.

I hope this solution proves helpful!

Answer 3

Answer №2

If you want to play around with opacity, you can use the pointer-events property in CSS. By setting it to "none", you allow events to pass through as if the element was invisible. On the other hand, setting it to "all" makes the element clickable and interactive. More information on this property can be found at https://css-tricks.com/almanac/properties/p/pointer-events/

The browser support for pointer-events is good overall, except for older versions of Internet Explorer (pre-10). However, there is a polyfill available on GitHub to address this issue: http://caniuse.com/#search=pointer-events

$('button').on('click', function(e) {
e.preventDefault();
  $('.container').toggleClass('overlay-open');
})

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: black;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}

.overlay-open .overlay {
  opacity: 1;
  pointer-events: all;
}

button {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle Overlay</button>
<div class="container">
  <div class="back">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsam, illum sed dolorum quos modi, quibusdam cum tempora molestias laboriosam voluptas. Fuga corporis earum modi, aut nisi in molestias explicabo voluptatem iure distinctio tempora, iusto doloremque. Inventore culpa eligendi dolore. Expedita, officia, assumenda. Id magnam molestias saepe, cupiditate, architecto autem.
  </div>
  <div class="overlay"></div>
</div>

Answer 4

If you want to play around with opacity, you can use the pointer-events property in CSS. By setting it to "none", you allow events to pass through as if the element was invisible. On the other hand, setting it to "all" makes the element clickable and interactive. More information on this property can be found at https://css-tricks.com/almanac/properties/p/pointer-events/

The browser support for pointer-events is good overall, except for older versions of Internet Explorer (pre-10). However, there is a polyfill available on GitHub to address this issue: http://caniuse.com/#search=pointer-events

$('button').on('click', function(e) {
e.preventDefault();
  $('.container').toggleClass('overlay-open');
})

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: black;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}

.overlay-open .overlay {
  opacity: 1;
  pointer-events: all;
}

button {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle Overlay</button>
<div class="container">
  <div class="back">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsam, illum sed dolorum quos modi, quibusdam cum tempora molestias laboriosam voluptas. Fuga corporis earum modi, aut nisi in molestias explicabo voluptatem iure distinctio tempora, iusto doloremque. Inventore culpa eligendi dolore. Expedita, officia, assumenda. Id magnam molestias saepe, cupiditate, architecto autem.
  </div>
  <div class="overlay"></div>
</div>

Text with a fading black overlay

Answer №1

Answer №2

Similar questions

Child element does not follow z-index rules

Having trouble displaying the image on the webpage

adjust the vertical size of a specified container

The CSS3 Animation-fill-mode: An Essential Property

Angular 2's innovative approach to implementing a sticky footer concept

Aligning images horizontally within individual div containers within a list

Ensure that both tables contain columns of equal size

WebView Background Image Displays in Simulator but Not on Actual Device

At times, Firefox may fail to fully showcase an image in fullscreen mode

PHP code for displaying images on the same level

How do I prevent the React <div id="root"></div> from disrupting the layout of my design?

I am currently working on a project where I must verify the Pass or Fail icon using Selenium WebDriver for my application

The clash of interests between jQuery and Bootstrap

React Card with Overflowing TableCell Texts

Issue with NPM and Local Host Preventing Proper Functionality of LESS CSS and Installation of LESS Package Control in Sublime 3

Customizing the appearance of a radio button within a form

Efficiently reducing the size of a CSS selector string with javascript

Issues with Vertical Alignment and Navigation

Utilizing HTML values within CSS3 content

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to