<script>
(function() {

var queue = false,
    touch = 'ontouchstart' in document.documentElement ? true : false,
    images = document.querySelector('.images'),
    imageWidth = images.firstElementChild.offsetWidth,
    imageOffset = images.firstElementChild.offsetLeft,
    cssTransition = function () {
      var body = document.body || document.documentElement,
          style = body.style,
          property = 'Transition',
          vendors = ['Moz', 'Webkit', 'O', 'ms'],
          vendorCount = vendors.length;

      if (typeof style[property.toLowerCase()] === 'string') {
        return true;
      }

      do {
        if (typeof style[vendors[vendorCount] + property] === 'string') {
          return true;
        }
      } while (vendorCount--);

      return false;
    },
    timeout = cssTransition() ? [300, 400] : [0, 0];

images.addEventListener(touch ? 'touchend' : 'click', function (event) {
  if (!queue) {
    queue = true;

    var direction = ((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2 ? 'slide-right' : 'slide-left',
        last = images.lastElementChild.classList;

    last.add(direction);

    setTimeout(function () {
      last.remove(direction);
      last.add('back');

      setTimeout(function () {
        images.insertBefore(images.lastElementChild, images.firstElementChild);
        last.remove('back');
        queue = false;
      }, timeout[0]);
    }, timeout[1]);
  }
}, false);

})();
  </script>


<style>
.images {
  cursor: pointer;position:relative;
}
.images:hover .image:nth-child(4) {
  -webkit-transform: rotate(10deg) translateX(50px);
  -moz-transform: rotate(10deg) translateX(50px);
  -ms-transform: rotate(10deg) translateX(50px);
  -o-transform: rotate(10deg) translateX(50px);
  transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
  -webkit-transform: rotate(3deg) translateX(75px);
  -moz-transform: rotate(3deg) translateX(75px);
  -ms-transform: rotate(3deg) translateX(75px);
  -o-transform: rotate(3deg) translateX(75px);
  transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
  -webkit-transform: rotate(-2deg) translateX(-50px);
  -moz-transform: rotate(-2deg) translateX(-50px);
  -ms-transform: rotate(-2deg) translateX(-50px);
  -o-transform: rotate(-2deg) translateX(-50px);
  transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
  -webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -o-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 250px;
  width: 300px;
  margin-top: -110px;
  margin-left: -105px;
  border: 5px solid #fff;
  border-bottom-width: 15px;
  -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
  z-index: 2;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.image:first-child {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  transform: rotate(8deg);
}
.image:nth-child(2) {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}
.image:nth-child(3) {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.image:nth-child(4) {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.image:last-child {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.image.slide-right {
  -webkit-transform: rotate(290deg) translateX(250px);
  -moz-transform: rotate(290deg) translateX(250px);
  -ms-transform: rotate(290deg) translateX(250px);
  -o-transform: rotate(290deg) translateX(250px);
  transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
  -webkit-transform: rotate(-290deg) translateX(-250px);
  -moz-transform: rotate(-290deg) translateX(-250px);
  -ms-transform: rotate(-290deg) translateX(-250px);
  -o-transform: rotate(-290deg) translateX(-250px);
  transform: rotate(-290deg) translateX(-250px);
}
.image.back {
  z-index: 1;
}
  </style>

<div class="images">
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
</div>

<script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/reflection.js" type="text/javascript"></script>

<img class="reflect" src="URL DE LA IMAGEN" />

<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL de la imagen" width="100"/>