<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='stackone'> <img src="http://bootsnipp.com/img/avatars/a2f8472191983eb9d11563095cdd5e070c719896.jpg" /> <img src="http://bootsnipp.com/img/avatars/a2f8472191983eb9d11563095cdd5e070c719896.jpg" /> <img src="http://bootsnipp.com/img/avatars/a2f8472191983eb9d11563095cdd5e070c719896.jpg" /> <img src="http://bootsnipp.com/img/avatars/a2f8472191983eb9d11563095cdd5e070c719896.jpg" /> <img src="http://bootsnipp.com/img/avatars/a2f8472191983eb9d11563095cdd5e070c719896.jpg" /> <img src="http://bootsnipp.com/img/avatars/a2f8472191983eb9d11563095cdd5e070c719896.jpg" /> </div>

* { margin: 0; padding: 0; } body { background: #ccd3d7; } .stackone { overflow: hidden; *zoom: 1; position: relative; padding: 30px; height: 220px; margin-top: 50px; margin-left: -200px; left: 50%; width: 400px; overflow: visible; } img { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -webkit-transition: all 1s ease-in; transition: all 1s ease-in; border: 6px solid #fff; position: absolute; left: 50%; margin-left: -100px; } img:nth-child(2n) { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } img:nth-child(2n+1) { -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } img:nth-child(3n+1) { -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } img:last-child { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .stackone:hover img { -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -webkit-transition: all 1s ease-in; transition: all 1s ease-in; } .stackone:hover img:nth-child(2n) { -moz-transform: translate(100px, 10px) rotate(5deg); -ms-transform: translate(100px, 10px) rotate(5deg); -webkit-transform: translate(100px, 10px) rotate(5deg); transform: translate(100px, 10px) rotate(5deg); } .stackone:hover img:nth-child(2n+1) { -moz-transform: translate(10px, -50px) rotate(-5deg); -ms-transform: translate(10px, -50px) rotate(-5deg); -webkit-transform: translate(10px, -50px) rotate(-5deg); transform: translate(10px, -50px) rotate(-5deg); } .stackone:hover img:nth-child(3n+1) { -moz-transform: translate(-100px, 10px) rotate(-10deg); -ms-transform: translate(-100px, 10px) rotate(-10deg); -webkit-transform: translate(-100px, 10px) rotate(-10deg); transform: translate(-100px, 10px) rotate(-10deg); } .stackone:hover img:last-child { -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }