JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

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: hidden1;
    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);
		}
	);
});