How can i add an overlay to an image in css or any other way

Question

For example in the following image, there are no changes made to the actual photo but just a black color overlay is added.

How can i do it using css? or How can i do it using any other software?

There is also the filter property: http://bennettfeely.com/filters/ (I guess it's no overlay though) it works in most newer browsers, but there was an "old" filter in IE that worked differently, and because of the clash and naming confusion people tend to just avoid it - but it's not bad if you don't need to support IE. — ippi, Jun 25 '18 at 23:55

score 9 · Accepted Answer · answered Jun 25 '18 at 23:47

Here's one simple method, using a pseudo-element (::before) with a semi-transparent background (black with 50% opacity, defined by rgba) overlayed above an image.

.dark-img {
  position: relative;
  width: 300px;
}

.dark-img img {
  display: block;
  width: 100%;
}

.dark-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .5);
}

<div class="dark-img">
  <img src="https://i.imgur.com/qLRD0OC.jpg" />
</div>

score 1 · Answer 2 · answered Jun 25 '18 at 23:53

Quick and simple

<html>
<head>
  <style>
    .your-div {width: 500px; height: auto; background-color: #000;}
    .your-div img {width: 500px; height: auto; opacity: 0.3}
  </style>
</head>
<body>
    <h2>Hello</h2>
<div class="your-div">
  <img src="http://img1.juimg.com/140915/330518-14091516335670.jpg"></div>
</body>
</html>

codepen: https://codepen.io/anon/pen/XYPWXx

score 0 · Answer 3 · answered Jun 25 '18 at 23:48

<div id="overlay"></div>
CSS:
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

How can i add an overlay to an image in css or any other way

3 Answers3