Transition with animation

http://codepen.io/makzan/pen/xOpoWd

Code snippets

HTML

<div class='photo-stack'>
  <img src='<http://placekitten.com/300/200>'>
  <img src='<http://placekitten.com/300/200?image=2>'>
  <img src='<http://placekitten.com/300/200?image=3>'>
  <img src='<http://placekitten.com/300/200?image=4>'>
  <img src='<http://placekitten.com/300/200?image=5>'>
  <p>Album Title</p>
</div>

CSS

.photo-stack {
  position: relative;
  margin: auto;
  width: 300px;
  height: 250px;
}
.photo-stack > p {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
  font-weight: bold;
  z-index: 1000;
}
.photo-stack img {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid white;
  box-shadow: 0 1px 3px -2px rgba(0,0,0,.5);
  transition: all 0.3s ease-out;
}
.photo-stack img:nth-child(1) {
  z-index: 999;
}
.photo-stack img:nth-child(2) {
  transform: rotate3d(0,0,1,3deg);
}
.photo-stack img:nth-child(3) {
  transform: rotate3d(0,0,1,-3deg);
}
.photo-stack img:nth-child(4) {
  transform: rotate3d(0,0,1,2deg);
}

.photo-stack:hover img:nth-child(1) {
  transform: scale(1.02);
}
.photo-stack:hover img:nth-child(2) {
  transform: translate3d(10%, 0, 0) rotate3d(0,0,1,3deg);
}
.photo-stack:hover img:nth-child(3) {
  transform: translate3d(-10%, 0, 0) rotate3d(0,0,1,-3deg);
}
.photo-stack:hover img:nth-child(4) {
  transform: translate3d(2%, -5%, 0) rotate3d(0,0,1,2deg);
}
.photo-stack:hover img:nth-child(5) {
  transform: translate3d(-5%, -2%, 0) rotate3d(0,0,1,2deg);
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.