JSFiddle - React, Tailwind, and code Playground

by Shankar

HTML

<div></div>

CSS

div {
    height:300px;
    width: 450px;
    overflow: hidden;
    background-image: url('http://devble.com/wp-content/uploads/2014/01/woody.png');
  
 -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center; 
  
}

div:hover {
   -webkit-animation: animatedBackground 1s ease-out 1;
		-moz-animation: animatedBackground 1s ease-out 1;
		animation: animatedBackground 1s ease-out 1;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
}

	@-webkit-keyframes animatedBackground {
		0% {
			-webkit-transform: scale(1, 1);
			-moz-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			-o-transform: scale(1, 1);
			transform: scale(1, 1)
		}
		100% {
		-webkit-transform: scale(1.1, 1.1);
		-moz-transform: scale(1.1, 1.1);
		-ms-transform: scale(1.1, 1.1);
		-o-transform: scale(1.1, 1.1);
		transform: scale(1.1, 1.1)
		}

	}
	
	
	@-moz-keyframes animatedBackground {
		0% {
			-webkit-transform: scale(1, 1);
			-moz-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			-o-transform: scale(1, 1);
			transform: scale(1, 1)
		}
		100% {
			-webkit-transform: scale(1.1, 1.1);
			-moz-transform: scale(1.1, 1.1);
			-ms-transform: scale(1.1, 1.1);
			-o-transform: scale(1.1, 1.1);
			transform: scale(1.1, 1.1)
		}

	}
	@keyframes animatedBackground {
		0% {
			-webkit-transform: scale(1, 1);
			-moz-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			-o-transform: scale(1, 1);
			transform: scale(1, 1)
		}
		100% {
			-webkit-transform: scale(1.1, 1.1);
			-moz-transform: scale(1.1, 1.1);
			-ms-transform: scale(1.1, 1.1);
			-o-transform: scale(1.1, 1.1);
			transform: scale(1.1, 1.1)
		}

	}