CSS Color Filter Overlay

Question

I'm trying to create a color overlay over an image, like in this app (the green overlay over the image):

http://i.imgur.com/4XK9J6G.png

To me, it doesn't look like they're simply putting a color over the image. It looks like they're using some sort of green filter. How can I emulate this with CSS?

Here's the JSFiddle I started: https://jsfiddle.net/5ar4713h/embedded/result/

HTML:

<img src="http://www.planwallpaper.com/static/images/canberra_hero_image.jpg" />

CSS:

img {
  display: block;
}

/* Filter */
img:after {
  content: "";
}

Answer 1

A combination of CSS filters would be one method but without seeing the actual source page it's hard to be certain.

.wrap {
  width: 400px;
  height: 400px;
  margin: 1em auto;
  position: relative;
}

.wrap img {
  -webkit-filter: sepia(100%) hue-rotate(90deg) saturate(400%);
  filter: sepia(100%) hue-rotate(90deg) saturate(400%);
}

<div class="wrap">
<img src="http://lorempixel.com/image_output/nature-q-c-400-400-6.jpg" alt="" />
</div>

Alternatively, a simple greyscale filter with a transparent green overlay.

.wrap {
  width: 400px;
  height: 400px;
  margin: 1em auto;
  position: relative;
}
.wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(0, 150, 0, 0.75);
}
.wrap img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

<div class="wrap">
  <img src="http://lorempixel.com/image_output/nature-q-c-400-400-6.jpg" alt="" />
</div>

Answer 2

As shown in Paulie_D answer, one posibility is to use filters.

The other posibility is to use a blend mode.

You can use luminosity, that takes the luminosity from the front image and the color from the back image

Or you can use color, that works the other way round.

It just depends what layout adjust better to your needs

body {
  background-color: gray;
}

div {
  display: inline-block;
  width: 360px;
  height: 270px;
  position: relative;
  border: solid 1px black;
  margin-right: 40px;
}

.inner {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100%;
  height: 100%;
  background-color: red;
  border-radius: 50%;
}

.green {
  background-color: green;
}

.image {
  background-image: url("https://placekitten.com/1000/750");  
  background-size: cover;
}

.color {
  mix-blend-mode: color;
}

.luminosity {
  mix-blend-mode: luminosity;
}

<div class="image">
  <div class="inner green color"></div>
</div>
<div class="green">
  <div class="inner image luminosity"></div>
</div>

Answer 3

HTML:

 <div class="image-container">
        <img src="http://s6.picofile.com/file/8228890334/city_h_c_301_444_9.jpg" width="200px" height="300px" />
        <div class="after">Put your contetnt here</div>
    </div>    

CSS:

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    transition:all 0.2s ease;
    background: rgba(0, 0, 0, .6);
}   

Result:Overlay

Other solution is that useing CSS filter.such as Filter Functions .
Exmple:

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">   

CSS:

 img { display: block; width: 90%; }

    img {
      -webkit-filter: sepia(1);
      filter: sepia(1);
    }  

and result:Filter Functions
read more info here