JSFiddle - React, Tailwind, and code Playground

HTML

<div class="work-round">
  <img src="http://lrotherfield.com/wp-content/uploads/2012/11/Files-Upload-File-icon.png">
</div>

CSS

*{

    background:red;
}
.work-round {
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 10px auto;
    max-height:250px;
    overflow:hidden;
    width:250px;
    transition: all 2s linear;    
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);


}

.work-round img {
        background: none repeat scroll 0 0 #fff;
    height: 100%;
    min-height: 240px;
    transition: all 0.5s ease-out 0s;
    width: 350px;

    -webkit-border-radius: 500px;width:100%;height:100%;

}
.work-round img:hover {
    opacity: 0.9;
    -webkit-transform:scale(1.2);
}