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
IE9 Not Applying Linked Style Sheets
Looping Through Two @Each Lists in SCSS
How to Have Slanted Box-Shadows Using Only CSS
Draw Half Circle with CSS or Svg
CSS Select First Child Only If Two Children
How to Use '&' and a Tag on the Same Selector
How to Make Padding:Auto Work in CSS
How to Render Bootstrap Dropdown Above the Object
How to Hack Unsupported Mix-Blend-Mode CSS Property
In Firebug, How to Tell What Is Overriding a Style
Which Border Radius Property Will Work in IE9
HTML/CSS Buttons That Scroll Down to Different Div Sections on a Webpage
How to Set an Input Width to Match The Placeholder Text Width
Media Query for iPad (Landscape) Applied to Samsung Galaxy Tab 2 (Landscape) as Well