/****************************************************************/
/*
 * Version: 1.0
 * Author: Andre Firchow
 *

 */
.thumbnail-effect {
  display: block;
  width: 310px;
  height: 210px;
  overflow: hidden;
  position: relative;
  background: cyan;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.thumbnail-effect span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.thumbnail-effect:hover span {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.thumbnail-effect img {
  position: absolute;
  top: 5px;
  left: 5px;
}
.thumbnail-effect .square-1 {
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  background: magenta;
  top: -50%;
  left: -50%;
}
.thumbnail-effect .square-2 {
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  background: yellow;
  top: 50%;
  left: -50%;
}
.thumbnail-effect .square-3 {
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  background: lime;
  top: -50%;
  left: 50%;
}
.thumbnail-effect.perspective-x {
  -webkit-transform: perspective(1000px) rotateX(30deg);
  -moz-transform: perspective(1000px) rotateX(30deg);
  -ms-transform: perspective(1000px) rotateX(30deg);
  -o-transform: perspective(1000px) rotateX(30deg);
  transform: perspective(1000px) rotateX(30deg);
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 5px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 5px 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 5px 10px;
}
.thumbnail-effect.perspective-x:hover {
  -webkit-transform: perspective(600px) rotateX(0deg);
  -moz-transform: perspective(600px) rotateX(0deg);
  -ms-transform: perspective(600px) rotateX(0deg);
  -o-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
}
.thumbnail-effect.perspective-y {
  -webkit-transform: perspective(1000px) rotateY(30deg);
  -moz-transform: perspective(1000px) rotateY(30deg);
  -ms-transform: perspective(1000px) rotateY(30deg);
  -o-transform: perspective(1000px) rotateY(30deg);
  transform: perspective(1000px) rotateY(30deg);
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 5px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 5px 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 5px 10px;
}
.thumbnail-effect.perspective-y:hover {
  -webkit-transform: perspective(600px) rotateY(0deg);
  -moz-transform: perspective(600px) rotateY(0deg);
  -ms-transform: perspective(600px) rotateY(0deg);
  -o-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
}
.thumbnail-effect.color-alternate-1 {
  background: blue;
}
.thumbnail-effect.color-alternate-1 .square-1 {
  background: orange;
}
.thumbnail-effect.color-alternate-1 .square-2 {
  background: green;
}
.thumbnail-effect.color-alternate-1 .square-3 {
  background: red;
}
.thumbnail-effect.color-alternate-2 {
  background: #cccccc;
}
.thumbnail-effect.color-alternate-2 .square-1 {
  background: #999999;
}
.thumbnail-effect.color-alternate-2 .square-2 {
  background: white;
}
.thumbnail-effect.color-alternate-2 .square-3 {
  background: #666666;
}