CSS Color Filter Overlay

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>

Expand snippet

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>

Expand snippet

Leave a Comment