@import url(http://fonts.googleapis.com/css?family=Bubbler+One);
.slides-example1{width:800px;height:400px;margin:0;position:absolute;overflow:hidden}
.slides-example1 li{list-style:none;border:4px solid #000;height:392px;width:192px;position:absolute;left:0;z-index:2;-webkit-transition-property:width,left;-moz-transition-property:width,left;-o-transition-property:width,left;transition-property:width,left;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;overflow:hide}
.slides-example1 li:hover{width:320px;z-index:3}
.slides-example1 li:hover h2{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);bottom:10px;right:10px}
.slides-example1 li:hover img{clip:auto;margin:0;height:100%;width:320px}
.slides-example1 li h2{position:absolute;bottom:0;right:10px;display:block;white-space:nowrap;margin:0;padding:0;font-family:'Bubbler One', sans-serif;color:#fff;font-size:32px;-webkit-transform-origin:top right;-moz-transform-origin:top right;-ms-transform-origin:top right;-o-transform-origin:top right;transform-origin:top right;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition-property:-webkit-transform,right,bottom;-moz-transition-property:-moz-transform,right,bottom;-o-transition-property:-o-transform,right,bottom;transition-property:transform,right,bottom;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}
.slides-example1 li img{max-width:none !important;border:0;position:absolute;margin-left:-100px;margin-top:-100px;clip:rect(100px, 292px, 492px, 100px)}
.slides-example1 .slide-2{left:200px}
.slides-example1 .slide-2:hover{left:136px}
.slides-example1 .slide-3{left:400px}
.slides-example1 .slide-3:hover{left:336px}
.slides-example1 .slide-4{left:600px}
.slides-example1 .slide-4:hover{left:536px;left:472px}


.slides-example2{width:800px;height:400px;margin:0;position:absolute;overflow:hidden}
.slides-example2 li{list-style:none;border:4px solid #000;height:392px;width:192px;position:absolute;left:0;z-index:2;-webkit-transition-property:width,left;-moz-transition-property:width,left;-o-transition-property:width,left;transition-property:width,left;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;overflow:hide}
.slides-example2 li:hover{width:320px;z-index:3}
.slides-example2 li:hover h2{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);bottom:10px;right:10px}
.slides-example2 li:hover img{clip:auto;margin:0;height:100%;width:320px}
.slides-example2 li h2{position:absolute;bottom:0;right:10px;display:block;white-space:nowrap;margin:0;padding:0;font-family:'Bubbler One', sans-serif;color:#fff;font-size:32px;-webkit-transform-origin:top right;-moz-transform-origin:top right;-ms-transform-origin:top right;-o-transform-origin:top right;transform-origin:top right;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition-property:-webkit-transform,right,bottom;-moz-transition-property:-moz-transform,right,bottom;-o-transition-property:-o-transform,right,bottom;transition-property:transform,right,bottom;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}
.slides-example2 li img{max-width:none !important;border:0;position:absolute;margin-left:-100px;margin-top:-100px;clip:rect(100px, 292px, 492px, 100px)}
.slides-example2 .slide-2{left:200px}
.slides-example2 .slide-2:hover{left:136px}
.slides-example2 .slide-3{left:400px}
.slides-example2 .slide-3:hover{left:336px}
.slides-example2 .slide-4{left:600px}
.slides-example2 .slide-4:hover{left:536px;left:472px}