JSFiddle - React, Tailwind, and code Playground

by Grzegorz Pawlik

HTML

<div class="wrap">
    <div class="image"></div>
</div>

CSS

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;  
}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
}