Photo Stack Effect For Blogger

Few days back I posted a tutorial on Dynamic Stack Effect For Blogger. The tutorial I am posting now is on Photo Stack Effect, this effect uses only CSS3. I saw this effect on Google+ photos tab. The only disadvantage of this effect is browser compatibility, except the browser compatibility every thing works fine. I am giving the demo right on this page at the end.

Adding Photo Stack Effect To Blogger

Here I am giving you the easiest way to add this to your blog. Just follow the instructions below-

1. Add a new "HTML/JAVASCRIPT" gadget to your blog.

2. Paste the below code in the editor-

 

<style>
/* the A tag */
.album {
    position: relative;
    z-index: 5;
    width: 125px;
    vertical-align: top;
    display:block;
}

/* the images */
.album 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:125px;
    height:125px;
    display:block;
}
/* first image:  webkit */
@-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); }
}

/* first image:  firefox */
@-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); }
}

/* first image:  opera */
@-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); }
}

/* second image:  webkit */
@-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); }
}
/* second image:  firefox */
@-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); }
}
/* second image:  opera */
@-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); }
}

/* third image:  webkit */
@-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); }
}

/* third image:  firefox */
@-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); }
}

/* third image:  opera */
@-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); }
}
/* first image animation properties */
.album:hover .photo1, .album:focus .photo1 {

  /* webkit animation properties */
  -webkit-animation-name: image1;
  -webkit-animation-duration: .2s;
  -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
 
  /* firefox animation properties */
  -moz-animation-name: image1;
  -moz-animation-duration: .2s;
  -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
 
  /* opera animation properties */
  -o-animation-name: image1;
  -o-animation-duration: .2s;
  -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
 
  /* microsoft animation properties */
  -ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}

/* second image animation properties */
.album:hover .photo2, .album:focus .photo2 {

  /* webkit animation properties */
  -webkit-animation-name: image2;
  -webkit-animation-duration: .2s;
  -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
 
  /* firefox animation properties */
  -moz-animation-name: image2;
  -moz-animation-duration: .2s;
  -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
 
  /* opera animation properties */
  -o-animation-name: image2;
  -o-animation-duration: .2s;
  -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
 
  /* microsoft animation properties */
  -ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}

/* third image animation properties */
.album:hover .photo3, .album:focus .photo3 {

  /* webkit animation properties */
  -webkit-animation-name: image3;
  -webkit-animation-duration: .2s;
  -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
 
  /* firefox animation properties */
  -moz-animation-name: image3;
  -moz-animation-duration: .2s;
  -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
 
  /* opera animation properties */
  -o-animation-name: image3;
  -o-animation-duration: .2s;
  -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
 
  /* microsoft animation properties */
  -ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}
</style>
<a class='album' href='#'>
<img class='photo1' src='IMAGE URL'/>
<img class='photo2' src='IMAGE URL'/>
<img class='photo3' src='IMAGE URL'/>
</a>

5. Replace the IMAGE URL with your image url. 

Want more cool css tricks ? Then click here