JSFiddle - React, Tailwind, and code Playground

by Sunil Kumar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="albumContainer">
<img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="http://i.imgur.com/3DWAbmN.jpg" />
</div>

CSS

img{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    
    
}
.animate{
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

JavaScript

$("#albumContainer>img").hover(function(){
	$("#albumContainer>img").each(function(){
  	$(this).addClass("animate");
  });
  $(this).removeClass("animate");
});


$("#albumContainer>img").mouseout(function(){
	$("#albumContainer>img").each(function(){
   $(this).removeClass("animate");
  });
 
});