Question

I know how to do it via using an image, but it needs to be dynamically changing. Are there any tricks to using a color in place of an image? There appears to be very little documentation on using webkit masks.

I’m using this in a Chrome extension that can be used offline (i.e. I can’t use PHP for this).

Answer 1

You can use a pseudo element with a colored background like the example at http://www.impressivewebs.com/image-tint-blend-css/

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

.tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 255, 255, 0.5);
  -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -ms-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.tint:hover:before {
  background: none;
}

<figure class="tint">
  <img src="https://i.stack.imgur.com/e2VAF.jpg" alt="Example" width="400" height="260">
</figure>