How to dim an image keeping transparency untouched with CSS or JS?

Question

Normal approach to dimming an image suggested everywhere is to change it\'s opacity attribute and display something dark under it. However, my image has transparency and is on w

Answer 1

Another way to do this would be by using new CSS mask property (currently fully supported only by webkit) on the div with the darkening.

.dim {
  display: none;
  /*Also position it above the image*/
 }

.dim:hover {
 background-color: black;
 opacity: 0.5;
 -webkit-mask: url(image.png) top left / cover;
}