CODEWITHSUNDEEP
css
Ali Almohsen
Ali Almohsen

Reputation: 1321

How to add color overlay on an image

So I have an image. I need to put a color overlay rgba(56, 59, 64, 0.7) on top of this image.

HTML:

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

CSS:

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}


.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}
    
<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

Upvotes: 4

Views: 23798

Answers (3)

Mr.Pandya
Mr.Pandya

Reputation: 2038

HTML

    <div class="home">
       <img src="mango.jpg" />
        <div class="overlay"></div>
    </div>

SCSS

.home {
    position: relative;
    img {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(56, 59, 64, 0.7);
    }
}

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

Here you go

.home {

}

img {
  width: 100%;
  padding: 0;
  margin: 0;
  display:block;
}

.wrap {
  position:relative;
}

.wrap:before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.5);
  z-index:999;
}
<div class="home">
<div class="wrap">
   <img src="http://via.placeholder.com/350x150" />
 </div>
</div>

Upvotes: 11

Mihai T
Mihai T

Reputation: 17697

You can use pseudo-elements like before and absolute position it on top of the image

Added a blue background color for example purposes , so you can see it better, but you can use any color with opacity

img {
  width: 100%;
  padding: 0;
  margin: 0;
}
.home {
	position:relative;
}
.home:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,255,0.5);
}
<div class="home">
  <img src="http://via.placeholder.com/350x150">
</div>

Upvotes: 5

Related Questions