JSFiddle - React, Tailwind, and code Playground

by nikita_turing

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">

<div class="mvp img-circle js" >
 <img src="http://i.ytimg.com/vi/BxCy2GjZKxw/mqdefault.jpg" />
</div>

<div class="mvp img-circle js" >
 <img src="http://i.ytimg.com/vi/BxCy2GjZKxw/mqdefault.jpg" />
</div>

 <img src="http://i.ytimg.com/vi/BxCy2GjZKxw/mqdefault.jpg" />

CSS

.mvp{
margin:auto;
    border-radius: 50%;
    width:150px;
    height: 150px;
    overflow: hidden;
}

.mvp img {
position: relative;
 max-width:300%;
 max-height: 100%;
}

img {
    cursor:pointer;
}

JavaScript

$(".mvp").hover(function () {
    $(this).animate({
        "border-radius": "6px"
    });
}, function () {
    $(this).animate({
        "border-radius": "50%"
    });
}); 

var radi =  150;

$('.mvp img').css("left", ($('.mvp').width()/2)-($('.mvp img').width()/2))

//$image.height(radi);
//$image.css("left", 0-(radi/2));