JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<div id="zoom-box">
    <img src="http://www.talisman.org/~erlkonig/humour/Lolcats/lolcat-dunecat.jpg" alt="kittah" />
</div>

CSS

#zoom-box {
    background: #fff;
    border-radius:10px;
    width:0;
    height:0;
    position:relative;
    top:150px;
    left:150px;
    border:solid 4px yellow;
    font-size:0;
    line-height:0;
    vertical-align:middle;
    text-align:center;
    color:#fff;
}
#zoom-box img {border-radius:8px;width:100%;}

JavaScript

$('#zoom-box').animate({
    width:'300px',
    height:'300px',
    top:'0',
    left:'0',
    'font-size':'50px',
    'line-height':'300px'
}, 1000);