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>