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>