Текст базового варианта с сайта: "http://www.cssplay.co.uk/menu/photo_simple"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A simple photograph gallery</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
@import url(//www.google.com/cse/api/branding.css);
</style>
<style type="text/css">
#info {position:relative; z-index:10;}
a, a:visited, a:hover, a:active {}
#gallery {width:750px; position:relative;}
#gallery .default {position:absolute; left:89px; top:53px; border:1px solid #888; z-index:-1;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;}
#gallery ul li a b {position:absolute; left:-9999px; display:block; width:570px; height:360px; background:#fff;}
#gallery ul li a:hover,
#gallery ul li a:active,
#gallery ul li a:focus {white-space:normal; border-color:#000; outline:0;}
#gallery ul li a:hover b {position:absolute; left:0; top:5px; z-index:100;}
#gallery ul li a:active b,
#gallery ul li a:focus b {position:absolute; left:0; top:5px;}
#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto; border:1px solid #888;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#gallery .default {top:55px;}
#gallery ul li a b {text-align:center; z-index:-1;}
#gallery ul li a b span {display:block; width:0; height:100%; display:inline-block; vertical-align:middle;}
#gallery ul li a b img {margin:0 auto; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->
</head>
<body id="www-cssplay-co-uk">
<!-- info gallery-->
<div id="info">
<h2>Simplest photograph gallery</h2>
<div id="gallery">
<img class="default" src="trees/t1.jpg" alt="" />
<ul>
<li><a href="#x"><img src="trees/t1.jpg" alt="" /><b><span></span><i><img src="trees/t1.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t2.jpg" alt="" /><b><span></span><i><img src="trees/t2.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t3.jpg" alt="" /><b><span></span><i><img src="trees/t3.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t4.jpg" alt="" /><b><span></span><i><img src="trees/t4.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t5.jpg" alt="" /><b><span></span><i><img src="trees/t5.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t6.jpg" alt="" /><b><span></span><i><img src="trees/t6.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t7.jpg" alt="" /><b><span></span><i><img src="trees/t7.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t8.jpg" alt="" /><b><span></span><i><img src="trees/t8.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t9.jpg" alt="" /><b><span></span><i><img src="trees/t9.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t10.jpg" alt="" /><b><span></span><i><img src="trees/t10.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t11.jpg" alt="" /><b><span></span><i><img src="trees/t11.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/p1.jpg" alt="" /><b><span></span><i><img src="trees/p1.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t13.jpg" alt="" /><b><span></span><i><img src="trees/t13.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t14.jpg" alt="" /><b><span></span><i><img src="trees/t14.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t15.jpg" alt="" /><b><span></span><i><img src="trees/t15.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t16.jpg" alt="" /><b><span></span><i><img src="trees/t16.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t17.jpg" alt="" /><b><span></span><i><img src="trees/t17.jpg" alt="" /></i></b></a></li>
<li><a href="#x"><img src="trees/t18.jpg" alt="" /><b><span></span><i><img src="trees/t18.jpg" alt="" /></i></b></a></li>
</ul>
</div>
<br class="clear" />
<br /><br /><br />
<p class="info">copyright ©2010 stu nicholls - cssplay.co.uk</p>
</div> <!-- end of info -->
</body>
</html>
