<div class="gallery">
<div class="gallery">
<img src="http://placehold.it/200x250/3ebecc/000000&text=image+1">
<img src="http://placehold.it/200x250/4eb7a3/000000&text=image+2">
<img src="http://placehold.it/200x250/c6b654/000000&text=image+3">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
.gallery {
.gallery {
position: relative;
margin: 200px;
}
.gallery img {
position: absolute;
z-index: 0;
}
.gallery img:nth-child(1) {
left: -25px;
transform: rotate(-7deg)
}
.gallery img:nth-child(3) {
left: 25px;
transform: rotate(7deg)
}
.gallery img.active {
z-index: 10;
}
$(function() {
$(function() {
$('img').mouseenter(function() {
$(this).addClass('active').siblings().removeClass('active')
});
});