Silhouette a PNG image using CSS

Question

Anyone know of a way that I can get CSS to make a PNG image with transparency look completely blacked out like a silhouette?

In other words- Going from something li

Answer 1

Nowdays, filter combined to mix-blend-mode could do too :

span {/* to be used to lay the 'blender mask' over img */
  position: relative;
  display: inline-block;
  overflow:hidden;
}

span img {
  display: block;/* erase gap */
  max-width:45vw;
  filter: contrast(150%);
}
span + span img {
  filter: contrast(120%) saturate(0%);/* saturate(0%) is  similar to grayscale(100%) */
}

span:before {
  content: '';
  z-index: 1;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  filter: contrast(10000%) brightness(0) saturate(100%) grayscale(100%);
  mix-blend-mode: color-burn;/* bake it to black */
  animation : span 2s infinite alternate;
}
@keyframes span {
  from{
    transform:translate(-100%,0)
  }
  25%,50% {
    transform:translate(0,0);
  }
  to{
    transform:translate(100%,0)
  }
}