CSS Mask Image

Image color change using CSS Mask

by Md Naveed

HTML

<h2>Original Image</h2>
<img src="http://cometpos.in/stitchfunda/images/RoundedLehengaPrototypeFront.png" />

<h2>Using CSS Mask - Works only in Chrome browsers</h2>
<div class="mask-image" style="background-color: red;"></div>
<div class="mask-image" style="background-color: blue;"></div>
<div class="mask-image" style="background-color: green;"></div>

CSS

.mask-image {
  display: inline-block;
  width: 100px;
  height: 100px;
  -webkit-mask-box-image: url(http://cometpos.in/stitchfunda/images/RoundedLehengaPrototypeFront.png);
}

img {
  width: 100px;
  height: 100px;
  margin-bottom: 30px;
}