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

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