CSS3 Garage Door Horizontal Menu

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

<style type='text/css'> #garagedoor { margin: 10px auto; list-style: none; background: url(http://www.blogspotvision.info/css/garage-door-menu/images/menu-bg.jpg) no-repeat; width: 800px; overflow: auto; } #garagedoor li { width: 200px; height: 100px; display: block; float: left; } /* Modernizer Enabled */ .csstransitions #garagedoor li { -webkit-transition: background-position 0.6s ease; -moz-transition: background-position 0.6s ease; -o-transition-property: background-position 0.6s ease; } .csstransitions #garagedoor li:hover { background-position: 0 -100px !important; } #garagedoor li#shutter1 { background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-africanplains.jpg) 0 0 no-repeat; } #garagedoor li#shutter2 { background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-reptiles.jpg) 0 0 no-repeat; } #garagedoor li#shutter3 { background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-aviary.jpg) 0 0 no-repeat; } #garagedoor li#shutter4 { background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-arcticzone.jpg) 0 0 no-repeat; } #garagedoor a { width: 200px; height: 100px; display: block; background: url(http://www.blogspotvision.info/css/garage-door-menu/images/window.png) no-repeat bottom center; text-indent: -9999px; } </style>

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

<ul id='garagedoor'> <li id='shutter1'><a href='#1'>Link 1</a></li> <li id='shutter2'><a href='#2'>Link 2</a></li> <li id='shutter3'><a href='#3'>Link 3</a></li> <li id='shutter4'><a href='#4'>Link 4</a></li> </ul> <script> var jQueryScriptOutputted = false; function initJQuery() { if (typeof(jQuery) == 'undefined') { if (!jQueryScriptOutputted) { jQueryScriptOutputted = true; // Primitive way of loading scripts (no library yet) document.write("<scr" + "ipt src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\"></scr" + "ipt>"); } setTimeout("initJQuery()", 50); } else { // jQuery way of loading scripts $.getScript('js/jquery.backgroundPosition.js', function() { // Just for demo $("h2").text('This Browser is using a jQuery fallback for this effect.'); $("html").removeClass("csstransitions"); // Set CSS in Firefox (Required to use the backgroundPosition js) $('#shutter1').css({backgroundPosition: '0px 0px'}); $('#shutter2').css({backgroundPosition: '0px 0px'}); $('#shutter3').css({backgroundPosition: '0px 0px'}); $('#shutter4').css({backgroundPosition: '0px 0px'}); // Animate the Shutter $("#garagedoor a").hover(function() { $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500); }, function() { $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500); }); }); } } if (!Modernizr.csstransitions) { initJQuery(); } </script>

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

<script src='http://www.blogspotvision.info/css/garage-door-menu/modernizr-1.5.min.js'/>

Exploding Image/logo for Blogger

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

<style> a#homeLogo { width:300px; height:233px; text-indent:-3000px; background:url(http://www.blogspotvision.info/css/exploding-logo/bsvlogo.jpg) 0 0 no-repeat; display:block; z-index:2; } a#homeLogo span { float:left; display:block; background-image:url(http://www.blogspotvision.info/css/exploding-logo/bsvlogo.jpg); background-repeat:no-repeat; } .clear { clear:both; </style>

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

<a href="http://www.blogspotvision.com" id="homeLogo">Blogspot Vision</a>

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

<script src='http://www.blogspotvision.info/css/exploding-logo/mootools-1.3.js'/> <script src='http://www.blogspotvision.info/css/exploding-logo/CSSAnimation.js'/> <script src='http://www.blogspotvision.info/css/exploding-logo/CSSAnimation.MooTools.js'/> <script> // reset transforms to this var zeros = {x:0, y:0, z:0}; // Implement animation methods on the element prototype Element.implement({ // Scatter elements all over the place scatter: function(){ return this.translate({ x: Number.random(-1000, 1000), y: Number.random(-1000, 1000), z: Number.random(-500, 500) }).rotate({ x: Number.random(-720, 720), y: Number.random(-720, 720), z: Number.random(-720, 720) }); }, // Return them to their original state unscatter: function(){ return this.translate(zeros).rotate(zeros); }, // Frighten the image! AHHHHHHHH! frighten: function(d){ this.setTransition('timing-function', 'ease-out').scatter(); setTimeout(function(){ this.setTransition('timing-function', 'ease-in-out').unscatter(); }.bind(this), 500); return this; }, // Zoooooom into me zoom: function(delay){ var self = this; this.scale(0.01); setTimeout(function(){ self.setTransition({ property: 'transform', duration: '250ms', 'timing-function': 'ease-out' }).scale(1.2); setTimeout(function(){ self.setTransition('duration', '100ms').scale(1); }, 250) }, delay); }, // Create a slider makeSlider: function(){ var open = false, next = this.getNext(), height = next.getScrollSize().y, transition = { property: 'height', duration: '500ms', transition: 'ease-out' }; next.setTransition(transition); this.addEvent('click', function(){ next.setStyle('height', open ? 0 : height); open = !open; }); }, // Scatter, come back fromChaos: (function(x){ var delay = 0; return function(){ var element = this; //element.scatter(); setTimeout(function(){ element.setTransition({ property: 'transform', duration: '500ms', 'timing-function': 'ease-out' }); setTimeout(function(){ element.unscatter(); element.addEvents({ mouseenter: element.frighten.bind(element), touchstart: element.frighten.bind(element) }); }, delay += x); }, x); } }()) }); // When the DOM is ready window.addEvent("domready", function() { // Get the proper CSS prefix from the page var cssPrefix = false; switch(Browser.name) { // Implement only for Chrome, Firefox, and Safari case "safari": case "chrome": cssPrefix = "webkit"; break; case "firefox": cssPrefix = "moz"; break; } // If we support this browser.... if(cssPrefix) { // 300 x 233 var cols = 10; // Desired columns var rows = 8; // Desired rows var totalWidth = 300; // Logo width var totalHeight = 233; // Logo height var singleWidth = Math.ceil(totalWidth / cols); // Shard width var singleHeight = Math.ceil(totalHeight / rows); // Shard height var shards = []; // Array of SPANs // Remove the text and background image from the logo var logo = document.id("homeLogo").set("html","").setStyles({ backgroundImage: "none" }); // For every desired row rows.times(function(rowIndex) { // For every desired column cols.times(function(colIndex) { // Create a SPAN element with the proper CSS settings // Width, height, browser-specific CSS var element = new Element("span",{ style: "width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * colIndex) + "px -" + (singleWidth * rowIndex) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);" }).inject(logo); // Save it shards.push(element); }); // Create a DIV clear for next row new Element("div",{ clear: "clear" }).inject(logo); }); // Chaos! $$(shards).fromChaos(1000); } }); </script>

Sexy Image Hover Effects using CSS3 for Blogger

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

<style type='text/css'> .img{ -webkit-transform:scale(0.6); -moz-transform:scale(0.6); -o-transform:scale(0.6); float:left; margin-left:-20px; margin-right:-50px; margin-top:14px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } .img img{ padding:10px; border:1px solid #fff; } .img:hover{ -webkit-transform:scale(0.8); -webkit-box-shadow:0px 0px 30px #ccc; -moz-transform:scale(0.8); -moz-box-shadow:0px 0px 30px #ccc; -o-transform:scale(0.8); -o-box-shadow:0px 0px 30px #ccc; } .img .mask{ width: 100%; background-color: rgb(0, 0, 0); position: absolute; height: 100%; opacity:0.6; cursor:pointer; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; } #img-1:hover .mask{ height:0%; } #img-2:hover .mask{ height:0%; margin-top:130px; } #img-4:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%; } #img-3 #mask-1 { width:50%; } #img-3 #mask-2{ width:50%; margin-left:211px; } #img-3:hover #mask-1{ width:0%; } #img-3:hover #mask-2{ margin-left:430px; width:0%; } #img-5:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%; -webkit-transform: rotateX(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(-360deg); } #img-6:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%; -webkit-transform: rotateZ(750deg); -moz-transform: rotateZ(750deg); -o-transform: rotat(750deg); } </style> <style type='text/css'> #container{ width:100%; min-height:800px; background-color:#000; } a{ color: rgb(0, 114, 191); text-decoration: none; } .heading{ font-size:24px; color:#dfdfdf; text-align:center; padding-top:20px; } } .clearfix{ clear:both; float:none; } </style>

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

<div id='container'> <div id='image-container'> <div class='img' id='img-1'> <div class='mask'></div> <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/black-yellow-lambo.jpg' /> </div> <div class='img' id='img-2'> <div class='mask'></div> <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/bugatti.jpg' /> </div> <div class='img' id='img-3'> <div class='mask' id='mask-1'></div> <div class='mask' id='mask-2'></div> <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/cadillac.jpg' /> </div> <div class='img' id='img-4'> <div class='mask'></div> <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/ferrari-red.jpg' /> </div> <div class='img' id='img-5'> <div class='mask'></div> <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/jaguar.jpg' /> </div> <div class='img' id='img-6'> <div class='mask'></div> <img src='http://www.blogspotvision.info/css/sexy-image-hover/images/koenig.jpg' /> </div> <div class='clearfix'></div> </div> <div class='clearfix'></div> <br/></div>

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>

CSS3 Slide Up Boxes for Blogger

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

<style> .slide-up-boxes a { display: block; margin: 0 0 20px 0; background: rgba(215, 215, 215, 0.5); border: 1px solid #ccc; height: 85px; overflow: hidden; } .slide-up-boxes h5 { color: #333; text-align: center; height: 65px; font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */ opacity: 1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; } .slide-up-boxes a:hover h5 { margin-top: -65px; opacity: 0; } .slide-up-boxes div { position: relative; color: white; font: 12px/15px Georgia, Serif; height: 65px; padding: 10px; opacity: 0; -webkit-transform: rotate(6deg); -webkit-transition: all 0.4s linear; -moz-transform: rotate(6deg); -moz-transition: all 0.4s linear; -o-transform: rotate(6deg); -o-transition: all 0.4s linear; } .slide-up-boxes a:hover div { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); } .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://www.blogspotvision.info/images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; } .slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://www.blogspotvision.info/images/diw.png) 21px 10px no-repeat; padding-left: 90px; } .slide-up-boxes a:nth-child(3) div { background: #393838 url(http://www.blogspotvision.info/images/qod.png) 14px 16px no-repeat; padding-left: 133px; } </style>

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

<div id="page-wrap"> <section class="slide-up-boxes"> <a href="http://wufoo.com"> <h5>Where I work...</h5> <div>Wufoo is an online form builder that makes building even the most complex forms so easy, it's fun!</div> </a> <a href="http://digwp.com"> <h5>Book I co-authored...</h5> <div>Digging Into WordPress is a book and blog I co-author with Jeff Starr about the world's #1 publishing platform.</div> </a> <a href="http://quotesondesign.com"> <h5>Words I collect...</h5> <div>Quotes on Design is a collection of design related quotes. With an API for your integration ideas!</div> </a> </section> </div>

HTML+TIME DIV Background Hover Color Change for Blogger

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

<style type='text/css'> #tabs {padding:0; margin:25px 0 0 15px; list-style:none;} #tabs li {display:inline; padding:0; background:#f8f8f8; float:left; margin-right:35px; position:relative; text-align: left;} #tabs li#one {width:190px;} #tabs li#two {width:240px;} #tabs li#three {width:190px;} #tabs li b {display:block; background:transparent url(http://www.blogspotvision.info/css/html-plus-bg-color-change/tab_top.gif) no-repeat 0 0; padding:2px 0 0 5px; height:15px; font-size:0.9em; overflow:hidden;} #tabs li div {border:1px solid #888; border-width:0 1px 1px 1px; padding:20px 5px 5px 5px;} #tabs li h3 {padding:0; margin:0; font-family:georgia, serif; font-size:17px;} #tabs li p {font-family:verdana, serif; font-size:11px; line-height:1.5em;} #tabs li a {color:#000; text-decoration:none;} #tabs li a.inner-link {color:#c00; text-decoration:none;} #tabs li a.inner-link:hover {text-decoration:underline;} #tabs li#one:hover {background:#fef;} #tabs li#two:hover {background:#cff;} #tabs li#three:hover {background:#ffc;} </style>

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

<ul id="tabs"> <li id="one" class="time" begin="one.mouseenter" end="one.mouseleave" timeaction="class:backColorOne"> <b>Firefox</b> <div> <h3><a class="inner-link" href="http://www.mozilla.com/?from=sfx&uid=324648&t=552">Get Firefox with Google Toolbar </a></h3><p>The award-winning Web browser just got better. It's free and easy to use. Join the millions of people worldwide enjoying a better Web experience.<br /><a class="inner-link" href="http://www.mozilla.com/en-US/firefox/">Download Firefox - Free</a></p> <img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/mozilla.gif" alt="Mozilla Firefox" title="Mozilla Firefox" /> </div> </li> <li id="two" class="time" begin="two.mouseenter" end="two.mouseleave" timeaction="class:backColorTwo"> <b>Opera</b> <div> <h3>Your life at your fingertips</h3><p>Try Speed Dial™ in Opera's newest Web browser, Opera 9.20. It makes the fastest even faster. <br /><a class="inner-link" href="http://www.opera.com/browser/?utm_source=opera-text-ad&utm_medium=banner&utm_campaign=myoperalinks">Download Opera for Windows</a></p> <img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/opera.gif" alt="Opera for Windows" title="Opera for Windows" /> </div> </li> <li id="three" class="time" begin="three.mouseenter" end="three.mouseleave" timeaction="class:backColorThree"> <b>Explorer</b> <div> <h3>Get Internet Explorer 9 beta for your operating system</h3><p>Upgrade with confidence. Get downloads for Internet Explorer 9 beta, including recommended updates as they become available.<br /><a class="inner-link" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 9 beta Download</a></p> <img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/ie7.gif" alt="Internet Explorer 9 beta" title="Internet Explorer 9 beta" /> </div> </li> </ul>

CSS Play - Image Manipulation for Blogger

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

<style type='text/css'> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/image-manipulation.html Copyright (c) 2005-2010 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. BLOGGERIZED BY BLOGSPOTVISION.COM =================================================================== */ .gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery li {width:160px; height:140px; float:left;} .gallery li a {display:block; width:160px; height:140px; position:absolute; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery li a.p1 {background:url(http://www.blogspotvision.info/css/cssplay1/pic1.jpg); opacity:0.5; left:0; top:0;} .gallery li a.p2 {background:url(http://www.blogspotvision.info/css/cssplay1/pic2.jpg); opacity:0.5; left:160px; top:0;} .gallery li a.p3 {background:url(http://www.blogspotvision.info/css/cssplay1/pic3.jpg); opacity:0.5; right:0; top:0;} .gallery li a.p4 {background:url(http://www.blogspotvision.info/css/cssplay1/pic4.jpg); opacity:0.5; left:0; bottom:0;} .gallery li a.p5 {background:url(http://www.blogspotvision.info/css/cssplay1/pic5.jpg); opacity:0.5; left:160px; bottom:0;} .gallery li a.p6 {background:url(http://www.blogspotvision.info/css/cssplay1/pic6.jpg); opacity:0.5; right:0; bottom:0;} .gallery li a:hover {position:absolute; width:480px; height:280px; z-index:100; opacity:1;} .gallery li a.p1:hover {left:0; top:0;} .gallery li a.p2:hover {left:0; top:0;} .gallery li a.p3:hover {right:0; top:0;} .gallery li a.p4:hover {left:0; bottom:0;} .gallery li a.p5:hover {left:0; bottom:0;} .gallery li a.p6:hover {right:0; bottom:0;} .gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery2 li {width:240px; height:140px; float:left;} .gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;} .gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;} </style>

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

<h2>Stretch to fit</h2> <ul class="gallery"> <li><a class="p1" href="#url"></a></li> <li><a class="p2" href="#url"></a></li> <li><a class="p3" href="#url"></a></li> <li><a class="p4" href="#url"></a></li> <li><a class="p5" href="#url"></a></li> <li><a class="p6" href="#url"></a></li> </ul> <br /><br /> <h2>Shrink to fit</h2> <ul class="gallery2"> <li><a class="p1" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic1.jpg" alt="" /></a></li> <li><a class="p2" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic2.jpg" alt="" /></a></li> <li><a class="p3" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic5.jpg" alt="" /></a></li> <li><a class="p4" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic4.jpg" alt="" /></a></li> </ul>

CSS3 Photo Slide Show for Blogger

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

<style type='text/css'> /* ================================================================ This copyright notice must be untouched at all times. Copyright (c) 2010 Stu Nicholls - CSS play - all rights reserved. BLOGGERIZED BY BLOGSPOTVISION.COM =================================================================== */ .gallery {padding:0; margin:0; list-style:none; width:486px; height:558px; background:#f0f0e0; position:relative; margin:50px auto; padding:20px; border:1px solid #ddd; -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); -o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); *background:#f0f0e0 url(close.gif) no-repeat 493px 5px; /* for IE7 and lower */ } .gallery li {float:left; margin:15px; width:132px; height:156px; display:inline;} .gallery img.close {display:block; position:absolute; left:-9999px; top:64px; z-index:500; opacity:0; z-index:-1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .gallery li.close {margin:0; width:28px; height:28px; position:absolute; left:493px; top:5px; *cursor:pointer; /* for IE7 and lower */} .gallery li a {display:block; float:left; width:112px; height:126px; padding:9px 9px 19px 9px; margin:0; background:#fff; border:1px solid #e0e0e0; text-decoration:none; color:#000; position:absolute; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .gallery li a.left { -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -o-transform: rotate(-12deg); transform: rotate(-12deg); } .gallery li a.right { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } .gallery li a span {display:block; text-align:center; text-decoration:none; font:normal 5px/20px arial, sans-serif; color:#fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .gallery li a.p1 {top:25px; left:35px;} .gallery li a.p2 {top:25px; left:205px;} .gallery li a.p3 {top:25px; left:357px;} .gallery li a.p4 {top:215px; left:35px;} .gallery li a.p5 {top:215px; left:205px;} .gallery li a.p6 {top:215px; left:357px;} .gallery li a.p7 {top:405px; left:35px;} .gallery li a.p8 {top:405px; left:205px;} .gallery li a.p9 {top:405px; left:357px;} .gallery li a img {display:block; width:100%; height:100%; border:0;} .gallery li a:hover {margin:-5px -4px ; width:120px; height:135px; text-decoration:none; -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); -o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); } .gallery li a:active, .gallery li a:focus {margin:0; position:absolute; left:263px; margin-left:-185px; top:300px; margin-top:-215px; width:320px; height:360px; padding:25px 25px 50px 25px; opacity:1; z-index:100; outline:0; -webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7); -o-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7); box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .gallery li a:active + img {left:428px; opacity:1; z-index:500; cursor:pointer;} .gallery li a:focus + img {left:428px; opacity:1; z-index:500; cursor:pointer;} .gallery li a:active span, .gallery li a:focus span {color:#000; font-size:18px; padding-top:10px;} </style>

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

<ul class="gallery"> <li><a class="p1 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic1.jpg" alt="" /><span>Misty Landscape</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p2 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic2.jpg" alt="" /><span>Ladybirds</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p3 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic3.jpg" alt="" /><span>Dragonfly</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p4 right" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic4.jpg" alt="" /><span>Cricket</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p5 right" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic5.jpg" alt="" /><span>Green Lizard</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p6 right" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic6.jpg" alt="" /><span>Busking in Sydney</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p7 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic7.jpg" alt="" /><span>Singapore Mall</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p8 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic8.jpg" alt="" /><span>Kookaburra</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li><a class="p9 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic9.jpg" alt="" /><span>Darling Harbour</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li> <li class="close"></li> </ul>