JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;    
    transition:all 0.5s ;
    -webkit-transition:all 0.5s ;
    -o-transition:all 0.5s ;
    -moz-transition:all 0.5s ;
    
}
div:hover{
    background-size: contain;
    background-position: center center;
    -webkit-animation-name: bin;
     -webkit-animation-duration: 3s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-out;
     -webkit-animation-fill-mode: forwards;
     -webkit-animation-delay: 0s;
}


@-webkit-keyframes bin {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}