Gallery Photo Pure CSS3

by Maz Soma

HTML

<div class="gallery">   
<a tabindex="1"><img src="http://3.bp.blogspot.com/-cbw5EMeLKZ8/U186SacWHZI/AAAAAAAAAQU/0vlv_qYGfsM/s72-c/update.jpg"></a>    
<a tabindex="2"><img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/t1.0-9/s160x160/10246794_713632272009280_7640177125919591296_n.jpg"></a>      
<a tabindex="3"><img src="http://3.bp.blogspot.com/-bai4HxP2K3g/U2IcVItZffI/AAAAAAAAAQk/la3h4iE2-E4/s72-c/fearless_gallery_css_by_simplysilent-d6udump.png"></a>      
<a tabindex="4"><img src="http://3.bp.blogspot.com/-AUaxTEcX42w/U1K4BJZ9jaI/AAAAAAABdvo/mxxFDIj21a4/s72-c/Memasang+Flat+Slide+Share.png"></a>    
<a tabindex="5"><img src="https://lh4.googleusercontent.com/-5aC4z7DE5Nc/U0un3o0aB1I/AAAAAAAAAME/UcOoZFlmDwA/w188-h189-no/Untitled-3.jpg"></a>     
<a tabindex="6"><img src="http://3.bp.blogspot.com/-QmsQG6rcaR4/U0u1mC5jhYI/AAAAAAAAAMQ/tIP1WxdBMMo/s72-c/gethemplate.png"></a>      
<a tabindex="7"><img src="http://3.bp.blogspot.com/-QmsQG6rcaR4/U0u1mC5jhYI/AAAAAAAAAMQ/tIP1WxdBMMo/s72-c/gethemplate.png"></a>     
<a tabindex="8"><img src="http://3.bp.blogspot.com/-QmsQG6rcaR4/U0u1mC5jhYI/AAAAAAAAAMQ/tIP1WxdBMMo/s72-c/gethemplate.png"></a>      
<a tabindex="9"><img src="http://1.bp.blogspot.com/-FRV86wucW24/U05lyUOeXbI/AAAAAAAAANU/2klD5Fx7wcQ/s72-c/smz.jpg"></a>      
<a tabindex="10"><img src="http://2.bp.blogspot.com/-bfUfivhzVYk/U1Sp0a0dk6I/AAAAAAAAAOM/_hypfFNppDc/s72-c/button+thanks.gif"></a>      
<a tabindex="11"><img src="http://1.bp.blogspot.com/-V13awtC2N78/U1DIPUWuOPI/AAAAAAAAcos/xkLDIrpK-4E/s72-c/komentar-kompi-males.png"></a>      
<a tabindex="12"><img src="http://2.bp.blogspot.com/-oW6Ypt02Bzg/U1Xz4jxFDSI/AAAAAAAAAOg/rGF4FAmPvzs/s72-c/Website-crawl-errors1.jpg"></a>       
</div>

CSS

/* Photo Gallery styles */   
.gallery {      
margin: 100px auto 0;    
width: 800px;    
}      
.gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
/* CSS3 Prevent selections */
-moz-user-select: none;
 -webkit-user-select: none;
-khtml-user-select: none;
user-select: none; 
} 
.gallery a img { 
border: 8px solid #fff;
border-bottom: 20px solid #fff; 
cursor: pointer;
display: block; 
left: 0px;
 position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */ 
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease; 
 -o-transition: all 1.0s ease;
transition: all 1.0s ease;
/* CSS3 Box Shadow */ 
-moz-box-shadow: 2px 2px 4px #444;
 -webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}       

/* Custom CSS3 rotate transformation */ 
.gallery a:nth-child(1) img { 
 -moz-transform: rotate(-25deg); 
-webkit-transform: rotate(-25deg); 
transform: rotate(-25deg); 
} 
.gallery a:nth-child(2) img {  
-moz-transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}       

.gallery a:nth-child(3) img { 
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}       

.gallery a:nth-child(4) img {
 -moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}       

.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg); 
 transform: rotate(-5deg);
}       

.gallery a:nth-child(6) img { 
-moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg);
}       

.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}       

.gallery a:nth-child(8) img {
-moz-transform:...