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>