Grayscale overlay

by Danny_Joris

HTML

<div id="overlay-1">Some text</div>

<img class="grayscale" src="http://www.publicdomainpictures.net/pictures/10000/nahled/1-12313172492sOG.jpg" width="400">
<img class="grayscale2" src="http://www.publicdomainpictures.net/pictures/10000/nahled/1-12313172492sOG.jpg" width="400">

CSS

#overlay-1 {
  width: 300px;
  height: 150px;
  display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 50;
    background-color: rgba(11, 111, 204, .3);
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

img.grayscale2 {
  position: absolute;
  left: 0;
  clip: rect(50px, 350px, 200px, 50px);    
   -webkit-filter: grayscale(1);
}