CSS Photo Slideout effect :
-------------------------------------- OUTPUT --------------------------------------
-------------------------------------- CSS CODE --------------------------------------
@-webkit-keyframes image1 { 0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); } }
@-moz-keyframes image1 { 0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); } }
@-o-keyframes image1 { 0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); } }
@-webkit-keyframes image2 { 0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1); } }
@-moz-keyframes image2 { 0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1); } }
@-o-keyframes image2 { 0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(0deg) translate(0, -3px) scale(1.1); } }
@-webkit-keyframes image3 { 0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1); } }
@-moz-keyframes image3 { 0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1); } }
@-o-keyframes image3 { 0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(6deg) translate(100px, -3px) scale(1.1); } }
.album, .album2 { position: relative; z-index: 5; width: 250px; vertical-align: top; display:inline-block; }
.photo1 { z-index: 4; position:relative; }
.photo2 { z-index: 3; position:relative; }
.photo3 { z-index: 2; position:relative; }
.album:hover .photo1, .album:focus .photo1 { -webkit-animation-name: image1; -webkit-animation-duration: .2s;
-webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); -moz-animation-name: image1;
-moz-animation-duration: .2s; -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
-o-animation-name: image1; -o-animation-duration: .2s; -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
-ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
.album:hover .photo2, .album:focus .photo2 {
-webkit-animation-name: image2; -webkit-animation-duration: .2s; -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
-moz-animation-name: image2; -moz-animation-duration: .2s; -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
-o-animation-name: image2; -o-animation-duration: .2s; -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
-ms-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
.album:hover .photo3, .album:focus .photo3 { -webkit-animation-name: image3; -webkit-animation-duration: .2s;
-webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1); -moz-animation-name: image3;
-moz-animation-duration: .2s; -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
-o-animation-name: image3; -o-animation-duration: .2s; -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
-ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
.album img, .album2 img { position: absolute; top: 0; left: 0; border: 5px solid #f3f3f3; box-shadow: 1px 1px 2px #666;
-webkit-box-shadow: 1px 1px 2px #666; -moz-box-shadow: 1px 1px 2px #666; width:250px; height:250px; }
-------------------------------------- HTML CODE --------------------------------------
-------------------------------------- USING IMAGES --------------------------------------
