0

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

Pankaj Jaiswal
  • 3
  • 2

2 Answers2

0

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;
}
Dylan Anlezark
  • 1,256
  • 2
  • 12
  • 27
-1

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); 
}
Sameer
  • 4,758
  • 3
  • 20
  • 41