CSS Radial Image Mask

by meetaaronsilber

HTML

<img src="http://placekitten.com/200/200" class="imgclip">

CSS

.imgclip {
    -webkit-mask-image: -webkit-gradient(
    radial, 50% 50%, 90, 50% 50%, 95, 
    from(#fff), to(rgba(0,0,0,0)),
    color-stop(.1,rgba(0,0,0,0)));
}

.imgclip:hover {
    -webkit-mask-image: -webkit-gradient(
    radial, 50% 50%, 95, 50% 50%, 100, 
    from(#fff), to(rgba(0,0,0,0)),
    color-stop(.1,rgba(0,0,0,0)));
}