Image-gallery-pure-css

by VIvek Vaishnav

HTML

<div class="gallery">
  <img src="http://1.bp.blogspot.com/-TOX_doTZm4k/Wg_xzG1fIAI/AAAAAAAAA1I/3Zx77P0RBAEOvY_lh96754ZZohucDRglQCK4BGAYYCw/s320/photo-1431794062232-2a99a5431c6c.jpg">
  <img src="http://2.bp.blogspot.com/-4AcvH-c6cS4/Wg_xy7Z1OPI/AAAAAAAAA00/n5SzLCWWbrMB1Il8UluJNJUgEx3sO8C6wCK4BGAYYCw/s400/photo-1503864664483-e8a499e2eb22.jpg">
  <img src="http://3.bp.blogspot.com/-iqzkqlXn9CE/Wg_0u4fuImI/AAAAAAAAA1g/cvzSniKd3tI0GxBnlO1kwqmDzPcOXeR8ACK4BGAYYCw/s320/photo-1458966480358-a0ac42de0a7a.jpg">
  <img src="http://1.bp.blogspot.com/-6z9i8lp8Ddk/Wg_xzCWnskI/AAAAAAAAA1U/u7SijNnnwCYXEMRvT6ncGXuny64V_Y7GwCK4BGAYYCw/s320/photo-1430375642086-147fcd5fea57.jpg">
  <img src="http://1.bp.blogspot.com/-FpvmXHoGw2s/Wg_3wkil2TI/AAAAAAAAA1s/OHW0LqFooAE6sDu0IuIABcUHimunEY4qQCK4BGAYYCw/s320/photo-1502082553048-f009c37129b9.jpg">

</div>

CSS

body{background:#032840;}
 .gallery img {
    position: absolute;
    padding:10px;
    background:#fff;
    border:1px solid #000
}
.gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
    transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
    left: 150px;
    top: 50px;
    transform: rotate(-7deg);
}
 
.gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
    transform: rotate(10deg);
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
    transform: rotate(-4deg);
}
 
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
    transform: rotate(12deg);
}
.gallery img:hover {
   transform: scale(1.3);
    z-index: 10;
}
.gallery img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}