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 src="http://i.ytimg.com/vi/BxCy2GjZKxw/mqdefault.jpg" />
</div>

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

CSS

.mvp{
    margin:auto;

    width:150px;
    height: 150px;
    
    -webkit-transition:border-radius 0.3s linear;
    -moz-transition:border-radius 0.3s linear;  
    -o-transition:border-radius 0.3s linear;      
    transition:border-radius 0.3s linear;    
       
    webkit-border-radius: 50%; 
    moz-border-radius: 50%;   
    o-border-radius: 50%; 
    border-radius: 50%; 
    
    background:red;
  
}

.mvp:hover {  
 
 }


.mvp img {

 max-width:300%;
 max-height: 100%;
 opacity:0.5;
 position: relative; 
}



img {
    cursor:pointer;
}

JavaScript

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