JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article">
    <div class="imageWrapper"></div>
</div>

CSS

@keyframes imageZoom {
    100% {
        transform: scale(4);
    }
}
.article:hover .imageWrapper {
    animation-play-state: running;
}
.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    animation-name: imageZoom;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: both;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}