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

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%);
}

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%);
}