Ajax Loader
×
HTML
<div class="gallery">
1
<div class="gallery">
2
  
3
  <img src="http://placehold.it/200x250/3ebecc/000000&text=image+1">
4
 
5
  <img src="http://placehold.it/200x250/4eb7a3/000000&text=image+2">
6
  
7
  <img src="http://placehold.it/200x250/c6b654/000000&text=image+3">
8
 
9
</div>
10
 
11
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
CSS
.gallery {
1
.gallery {
2
  position: relative;
3
  margin: 200px;
4
}
5
 
6
.gallery img {
7
  position: absolute;
8
  z-index: 0;
9
}
10
 
11
.gallery img:nth-child(1) {
12
  left: -25px;
13
  transform: rotate(-7deg)
14
}
15
 
16
.gallery img:nth-child(3) {
17
  left: 25px;
18
  transform: rotate(7deg)  
19
}
20
 
21
.gallery img.active {
22
  z-index: 10;
23
}
 
JavaScript
$(function() {
1
$(function() {
2
  $('img').mouseenter(function() {
3
    $(this).addClass('active').siblings().removeClass('active')
4
  });
5
});
 

Untitled

CSSDeck G+