CSS3 - The future now - Carousel Slideshow

CSS Code Snippet
This section code should be inserted before the closing head tag.

<style type='text/css'> @import url(http://www.google.com/cse/api/branding.css); </style> <style type='text/css'> /* ================================================================ This copyright notice must be untouched at all times. Copyright (c) 2005-2011 Stu Nicholls - CSS play. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. Bloggerized by http://www.blogspotvision.com =================================================================== */ /* this is a CSS answer to fix the hover tilde problem in safari and chrome */ html {-webkit-animation: safariSelectorFix infinite 1s;} @-webkit-keyframes safariSelectorFix { 0% {zoom:1;} 100% {zoom:1;} } .slide {width:8500px; position:absolute; height:320px; right:-2160px; text-align:right; top:20px;} .window {width:726px; float:left; height:360px; position:relative; border:1px solid #000; margin:0 auto; overflow:hidden; background:#f0f0f0; box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7); -moz-box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7); -ms-box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7); -webkit-box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7); } .slide img {display:inline-block; width:240px; opacity:0.5; margin:70px 0 0 0; -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); -ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .slide .p7 {margin-right:0; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .slide img:hover {width:480px; margin-left:-60px; margin-right:-60px; margin-bottom:-80px; margin-top:0; position:relative; z-index:100; opacity:1; -o-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); -ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); } .slide .p1:hover ~ img.p21 {margin-right:-2460px;} .slide .p2:hover ~ img.p21 {margin-right:-2220px;} .slide .p3:hover ~ img.p21 {margin-right:-1980px;} .slide .p4:hover ~ img.p21 {margin-right:-1740px;} .slide .p5:hover ~ img.p21 {margin-right:-1500px;} .slide .p6:hover ~ img.p21 {margin-right:-1260px;} .slide .p7:hover ~ img.p21 {margin-right:-1020px;} .slide .p8:hover ~ img.p21 {margin-right:-780px;} .slide .p9:hover ~ img.p21 {margin-right:-540px;} .slide .p10:hover ~ img.p21 {margin-right:-300px;} .slide .p11:hover ~ img.p21 {margin-right:-60px;} .slide .p12:hover ~ img.p21 {margin-right:180px;} .slide .p13:hover ~ img.p21 {margin-right:420px;} .slide .p14:hover ~ img.p21 {margin-right:660px;} .slide .p15:hover ~ img.p21 {margin-right:900px;} .slide .p16:hover ~ img.p21 {margin-right:1140px;} .slide .p17:hover ~ img.p21 {margin-right:1380px;} .slide .p18:hover ~ img.p21 {margin-right:1620px;} .slide .p19:hover ~ img.p21 {margin-right:1860px;} .slide .p20:hover ~ img.p21 {margin-right:2100px;} .slide .p21:hover {margin-right:2280px;} </style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<div class="window"> <div class="slide"> <img class="p1" src="http://www.blogspotvision.info/css/carousel-slideshow/1.jpg" alt="" /> <img class="p2" src="http://www.blogspotvision.info/css/carousel-slideshow/2.jpg" alt="" /> <img class="p3" src="http://www.blogspotvision.info/css/carousel-slideshow/3.jpg" alt="" /> <img class="p4" src="http://www.blogspotvision.info/css/carousel-slideshow/4.jpg" alt="" /> <img class="p5" src="http://www.blogspotvision.info/css/carousel-slideshow/5.jpg" alt="" /> <img class="p6" src="http://www.blogspotvision.info/css/carousel-slideshow/6.jpg" alt="" /> <img class="p7" src="http://www.blogspotvision.info/css/carousel-slideshow/7.png" alt="" /> <img class="p8" src="http://www.blogspotvision.info/css/carousel-slideshow/8.jpg" alt="" /> <img class="p9" src="http://www.blogspotvision.info/css/carousel-slideshow/9.png" alt="" /> <img class="p10" src="http://www.blogspotvision.info/css/carousel-slideshow/10.jpg" alt="" /><img class="p11" src="http://www.blogspotvision.info/css/carousel-slideshow/11.jpg" alt="" /><img class="p12" src="http://www.blogspotvision.info/css/carousel-slideshow/12.jpg" alt="" /><img class="p13" src="http://www.blogspotvision.info/css/carousel-slideshow/13.jpg" alt="" /><img class="p14" src="http://www.blogspotvision.info/css/carousel-slideshow/14.jpg" alt="" /><img class="p15" src="http://www.blogspotvision.info/css/carousel-slideshow/15.jpg" alt="" /><img class="p16" src="http://www.blogspotvision.info/css/carousel-slideshow/16.jpg" alt="" /><img class="p17" src="http://www.blogspotvision.info/css/carousel-slideshow/17.jpg" alt="" /><img class="p18" src="http://www.blogspotvision.info/css/carousel-slideshow/18.jpg" alt="" /><img class="p19" src="http://www.blogspotvision.info/css/carousel-slideshow/19.jpg" alt="" /><img class="p20" src="http://www.blogspotvision.info/css/carousel-slideshow/20.jpg" alt="" /><img class="p21" src="http://www.blogspotvision.info/css/carousel-slideshow/6.jpg" alt="" /> </div> </div>