JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.magicbox img
{
width:100%;
transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;
text-align:center;
line-height:100%;
}

.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);
text-align:center;
line-height:100%;

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