Basic CSS - How to Overlay a Div with Semi-Transparent Div on Top

Adding transparent overlay to div

<style>.featured-image {  height: 338px;  position: relative;}
.overlay { position:absolute; top:0px; left:0px; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; z-index: 2;}</style><div class="featured-image"> <div class="overlay"></div> <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg"> </div>

CSS - Add a semi-transparent layer on top of a div

You can achieve this by using one of the pseudo-elements, either ::before or ::after, that will act as an overlay when the user clicks on the .card element.

Basically, we'll initially style that overlay, we'll use the ::after pseudo-element, and place it behind the .card element using z-index of -1 so that the overlay is hidden initially. When a click occurs, we add a class, let's call it is-canceled, to the .card element that simply sets the z-index of the overlay to a higher value (like 2 or 999) so that the overlay appears on top of the .card element and act as the intended overlay.

To make the overlay transition smoothly, we'll initially set its background-color to transparent and override that when the is-canceled class is attached to the .card element. When the is-canceled class is attached to the .card element, we'll set the background-color to a reddish background (something like rgba(255, 0, 0, .7). Using the transition property we can instruct the browser to have a smooth transition when the is-canceled is added/removed from the .card element.

To illustrate, here's alive demo that allows you to toggle the overlay when you click on the .card element:

const card = document.querySelector('.card');

card.addEventListener('click', () => card.classList.toggle('is-canceled'));
.card {
position: relative; /* required to correctly position the overlay */
max-width: 300px;
min-width: 200px;
display: flex;
flex-direction: column;
padding: 0px 0px 20px;
gap: 10px;
box-shadow: 0px 4px 8px rgba(41, 41, 41, 0.08);
border-radius: 10px;
overflow: hidden;
}

/* initial overlay styles */
.card::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
inset: 0;
background-color: transparent;
transition: all .4s 0s ease;
z-index: -1;
}

/* styles to be applied to the overlay when the "is-canceled" class is added */
.card.is-canceled::after {
background-color: rgba(255, 0, 0, .7);
z-index: 999;
}

.card-img {
order: 0;
display: block;
margin-bottom: 2rem;
}

.card-title {
align-self: center;
margin-bottom: 1rem;
}

.card-description {
align-self: center;
margin: 0px 20px 1rem;
text-align: center;
}
<div class="card">
<img class="card-img" alt="Card Image" src="https://via.placeholder.com/250">
<h3 class="card-title">Name Surname</h3>
<p class="card-description">This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description </p>
</div>

How to control css of images on top of a full page semi-transparent overlay div

I would remove all html and css from the javascript it will make it more maintainable.

Here is your css:

#overlay {
background: rgba(0, 0, 0, .4);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}

#home_text {
background: red;
height: 300px;
margin: 20px auto 0;
width: 300px;
}

On the overlay I changed the opacity to rgba since opacity affects all content inside. Rgba is also not supported in all browsers so you can have a fallback transparent png, Modernizr is great for support checks. Also removed the height setting on overlay and set the left right bottom and left to 0. You can change your home_text positioning to your liking I was unsure how it should look so I made it a red box.

Here is your html:

<div id="overlay">
<div id="home_text">
<!-- your image -->
</div>
</div>

Here is you cleaned up js:

$(function () {
var $overlay = $('#overlay');
$overlay.on('click', function (e) {
$overlay
.hide()
.off();
});
});

The off method removes that event.

An example of this can be seen here: http://jsfiddle.net/SHBXd/1/

Semi Transparent overlay over HTML video is always behind video

you can add after or before to #video-container, like this:

#video-container::after {
content:"";
position: absolute;
min-width: 100vw;
min-height: 100vh;
background-color:rgba(10,10,10,0.8);
z-index: 100;
left: 0;
top: 0;
}

if you want to transparent layer be the same size of your video, add relative position to your container:

#video-container { position: relative;} 

and change the width and height of your pseudo-class to 100%;

#video-container::after {
content:"";
position: absolute;
width: 100%;
height: 100%;
background-color:rgba(10,10,10,0.8);
z-index: 100;
left: 0;
top: 0;
}

Anyway, it takes the size of a parent that have first relative position.

DIV and CSS: Floating box inside semi transparent div

Personally I would change your structure a slight bit and decouple your CSS - if only for your own sanity when reading the thing in between content (if you want to you can simple include it in a <style type="text/css"></style> tag and it would work as well.

Since you want your white box to be inside your container, why not structure it like that? By fixing the outer container (with class overlay, referenced as .overlay in CSS) you can now position the inner box correctly, by moving it 50% from the left and top and then transform the box itself using translate, moving it by minus half its width and height. Now your structure makes sense and you can do whatever you want with your inner box:

div.overlay {  position: fixed;    top: 0;   left: 0;  width: 100%;  height: 100%;  z-index: 1000;   background-color: gray;  background-color: rgba(150,150,150,.5);}div.overlay div {  position: absolute;   left: 50%;  top: 50%;  transform: translate(-50%,-50%);  color: black;   font-weight: bold;   text-align: center;  padding: 20px;  background: rgba(255,255,255,.5)}
<div class="overlay">  <div>    <h>Transferring Records...</h>    <br /><img src="/img/loading32.gif"/>    <br /><h>This may take a minute or two...</h>  </div></div>


Related Topics



Leave a reply



Submit