JSFiddle - React, Tailwind, and code Playground

HTML

<div class="magicbox">
<img class src="http://www.templatesbox.com/data/premium.templates/images/logo/full.preview/126484471518r.jpg" />
</div>

CSS

.magicbox
{
width:400px;
height:200px;
overflow:hidden;
position:relative;
float:left;
border:1px solid black;
}

.magicbox img
{
width:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 50%;
    margin: -25% 0 0 -25%;
transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;
 vertical-align: middle;

}

.magicbox:hover img
{
transform:scale(1.42,1.42);
-webkit-transform:scale(1.42,1.42);
-moz-transform: scale(1.42,1.42);
-o-transform:  scale(1.42,1.42);
-ms-transform:  scale(1.42,1.42);

transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;
}