JSFiddle - React, Tailwind, and code Playground

by espeon

HTML

<div id="bad-logo"></div>
<div id="good-logo"></div>

CSS

#good-logo {
    display: block;
    background: url("http://www.google.fr/images/srpr/logo11w.png") no-repeat;
    background-size: 538px 190px;
    width: 538px;
    height: 190px;
       
    -webkit-transform-origin: 0 0;
    -webkit-transition: 1s;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}

#good-logo:hover {
    -webkit-transform: scale3d(1, 1, 1);
}

#bad-logo {
    display: block;
    background: url("http://www.google.fr/images/srpr/logo11w.png") no-repeat;
    background-size: 269px 95px;
    width: 269px;
    height: 95px;
       
    -webkit-transform-origin: 0 0;
    -webkit-transition: 1s;
}

#bad-logo:hover {
    -webkit-transform: scale3d(0.5, 0.5, 0.5);
}