JSFiddle - React, Tailwind, and code Playground

by Van Hai Le

HTML

<div class="cat"><img src="http://www.codeforest.net/wp-content/uploads/2010/09/spiral_front2-138x138.jpg" /></div>

CSS

.cat{
    width: 128px;
    height: 128px;
    /* margin: 20px 96px 0px 96px; */
    position: relative;
    /* float: left; */
    border-radius: 50%;
    overflow: hidden;
    /* border-top: 1px solid #111; */
    /* border-bottom: 1px solid #fff; */
    /* background: #fff;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.8); */
}

.cat img{
    /* position: absolute; */
    /* border: none; */
    /* width: 138px;
    height: 138px;
    top: -8px;
    left: -8px; */
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
	$('.cat').hover(function(){
			$(this).children('img').stop(true, true).animate({
				'top': '+=8',
				'left': '+=8',
				'width': 130,
				'height': 130,
				'opacity': 0.75
			}, 300);
		},function(){
			$(this).children('img').stop(true, true).animate({
				'top': '-=8',
				'left': '-=8',
				'width': 138,
				'height': 138,
				'opacity': 1
			}, 200);
		}
	);
});