How to add a color filter to an image

Use the following CSS:

.tint {
  position: relative;
  float: left;
}

.tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  background: rgba(160, 255, 0, 0.4);
}

HTML:

<figure class="tint"><img class="img-circle" src="http://websitecdn.singular.net/wp-content/uploads/2017/03/24151515/profile_user-102x102.jpg" alt=""></figure>

Check the JSBin: http://jsbin.com/igahay/1/edit?html,output