JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<body class="b">
	<div class="b-line">
		<div><img class="main image move" src="http://regfoto.ru/photos/20140325139576042130791.png"/></div>
	</div>
</body>

CSS

.b {
	margin: 0;
	padding: 0;
	background: #e8e8e8;
}
.b-line {
	height: 550px;
	width: 550px;
	background: url(http://regfoto.ru/photos/20140325139576038150196.jpg) center no-repeat;
	margin: 0 auto;
}
.main {
	width:200px;
	height: 50px;
	margin: 250px 0 0 170px;
}
.image{
	transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
	-ms-transition: all 2s ease-in-out;
}
.move:hover {
	transform: translate(250px,-250px) rotate(360deg) scale(.5);
	-moz-transform:  translate(250px,-250px) rotate(360deg) scale(.5);
	-o-transform:  translate(250px,-250px) rotate(360deg) scale(.5);
	-webkit-transform:  translate(250px,-250px) rotate(360deg) scale(.5);
	-ms-transform:  translate(250px,-250px) rotate(360deg) scale(.5);
}