add overlay on image using ::before [duplicate] - html

Question

This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I have a post carousel where i am showing archive post .
<div class="col-md-12">
<div class="post--small mb-4">
<img src="assets/images/Layer%2014.png" alt="" class="post__img img-fluid mr-2">
<div class="post__body">
<a class="post__title post__title--small text-capitalize mb-3 text-white">
Ahmedabad Investor CampFinal Disscusion
</a>
<p class="post__date post__date--small text-uppercase">29 may 2019</p>
</div>
</div>
</div>
and CSS
.post__title, .post:link, .post:visited {
font-size: 18px;
font-weight: 500;
color: #fff;
cursor: pointer;
display: block;
}
.post__img {
position: relative;
}
.post__img::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}
.post__date {
font-size: 12px;
font-weight: 400;
color: white;
}
.post--small {
display: flex;
}
.post--small .post__img {
width: 119px;
}
I am trying to achieve overlay on images with any extra div , so i used ::before element . I think everything i done is right but this code didn't work .
Please help , Thank you in advance

Answer 1

This is how I usually go about doing an image overlay, I tried to not edit your code too much, hope this helps: https://jsfiddle.net/jbgvaqtx/23/
HTML
<div class="col-md-12">
<div class="post--small mb-4">
<img src="https://picsum.photos/seed/picsum/200/300" alt="" class="post__img img-fluid mr-2">
<div class="post__body">
<a class="post__title post__title--small text-capitalize mb-3 text-white">Ahmedabad Investor CampFinal Disscusion</a>
<p class="post__date post__date--small text-uppercase">29 may 2019</p>
</div>
</div>
</div>
CSS
.post__title,
.post:link,
.post:visited {
display: block;
font-size: 18px;
font-weight: 500;
color: #fff;
cursor: pointer;
}
.post__img {
position: absolute;
cursor: pointer;
height: 10)%;
width: 100%;
pointer-events: all;
}
.post__img:hover ~ .post__body{
opacity: 1 !important;
}
.post__body{
position: relative;
display: block;
top: 0px;
left: 0px;
height: 100%;
width: 119px;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
}
.post__date {
font-size: 12px;
font-weight: 400;
color: white;
}
.post--small {
display: flex;
}
.post--small .post__img {
width: 119px;
}

Answer 2

Pseudo element like :before and :after not work with img tag in all browsers as answered here already https://stackoverflow.com/a/5843078/11719787
Try adding overlay with div tag
//Html
<div class="img-cont">
<img src="https://via.placeholder.com/150" alt="" class="post__img img-fluid mr-2">
<div class="image-overlay"></div>
</div>
//CSS
.img-cont {
position: relative;
}
.image-overlay {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}