JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />

CSS

div{
    overflow:hidden; 
    width:500px; 
    height:250px;
    position:relative;
}
img{
    display:block;
    position:absolute;
    height:auto;
    width:200%;
    left:-30%;
    top:-60%;
    
    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}
div:hover img{
    width:100%;
    top:0;
    left:0;
}