JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <span></span>
</div>http://jsfiddle.net/ff5Nk/762/#run

CSS

#wrapper {
    width: 300px; height: 300px;
    border-radius: 300px;
    overflow: hidden;
    
    border:solid 10px #000;
    background-color: #f30;
    z-index:3;
 /* this breaks the overflow:hidden in Chrome/Opera */
}

#wrapper span {
    width: 300px; height: 300px;
    top:0;
    background-color: #cde;
    transition: all 0.5s;
    z-index:1;
    overflow:hidden;
    background-image:url(http://www.paixaoeamor.com/arquivos/fotos/A777C.jpg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    display:inline-block;
    background-position:center center;
}

#wrapper:hover > span{
    opacity:.5;
    background-size:120% 120%;
}