/* the A tag */
.album {
  position: relative;
  z-index: 5;
  width: 140px;
  vertical-align: top;
  display:block;
  margin-left:40px;
}

/* 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:140px;
  height:120px;
  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);
}