JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

@keyframes imageZoom{
	0% { transform: scale(1); }
	50% { transform: scale(1.24); }
	100% { transform: scale(1);}
}
			
@-moz-keyframes imageZoom{
	0% { -moz-transform: scale(1);}
	50% { -moz-transform: scale(1.24); }
	100% { -moz-transform: scale(1); }
}
			 
@-webkit-keyframes imageZoom{
	0% { -webkit-transform: scale(1); }
	50% {-webkit-transform: scale(1.24); }
	100% { -webkit-transform: scale(1); }
}
			
@-ms-keyframes imageZoom{
	0% { -ms-transform: scale(1); }
	50% { -ms-transform: scale(1.24); }
	100% { -ms-transform: scale(1); }
}

.article:hover .imageWrapper {
	animation: imageZoom linear 10s;
	animation-iteration-count: infinite;
	-webkit-animation: imageZoom linear 10s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation: imageZoom linear 10s;
	-moz-animation-iteration-count: infinite;
	-ms-animation: imageZoom linear 10s;
	-ms-animation-iteration-count: infinite;
	transform-origin: 50% 80%;
}

.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;
}