JSFiddle - React, Tailwind, and code Playground

HTML

Div1 (hover for lack of animation):<div id="div1"></div>
<br>
Div2 (hover for animation):<div id="div2"></div>

CSS

div {
    border: 1px dashed;
    width: 100px;
    height: 50px;
    background: url(http://www.terrystickels.com/db_3squaresto8squares5.jpg) no-repeat center center;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -ms-transition: .25s;
    transition: .25s;
}

#div1 {
    background-size: contain;
}
#div1:hover {
    background-size: cover;
}

#div2 {
    background-size: 50% 100%;
}
#div2:hover {
    background-size: 100% 200%;
}