Use CSS to make a photo demo effect code

css| Special Effects

CSS Code

The following is a reference fragment:
#info {
position:relative;
Background: #fff URL (.. /.. /updata/pic1b.gif) 175px 44px no-repeat;}

#scrollbox {
width:400px;
height:80px;
Background: #f4f4f4;
Overflow:auto;
border:1px solid #aaa;
margin-left:175px;
margin-top:70px;}

A.gallery, a.gallery:visited {
Display:block;
Color: #000;
Ext-decoration:none;
border:1px solid #000;
width:75px;
height:47px;
margin:3px;
Float:left;}

A.slidea {Background:url (.. /.. /updata/thumb2.jpg);}
A.slideb {Background:url (.. /.. /updata/thumb3.jpg);}
A.slidec {Background:url (.. /.. /updata/thumb4.jpg);}
a.slided {Background:url (.. /.. /updata/thumb5.jpg);}
A.slidee {Background:url (.. /.. /updata/thumb6.jpg);}
A.slidef {Background:url (.. /.. /updata/thumb7.jpg);}
a.slideg {Background:url (.. /.. /updata/thumb8.jpg);}
A.slideh {Background:url (.. /.. /updata/thumb9.jpg);}
A.slidei {Background:url (.. /.. /updata/thumb10.jpg);}
A.slidej {Background:url (.. /.. /updata/thumb11.jpg);}

A.gallery span {
Display:block;
Position:absolute;
left:150px;
top:-1px;
width:1px;
height:1px;
Overflow:hidden;
Background: #efedec;
z-index:100;}

a.gallery:hover {white-space:normal; border:1px solid #fff;}
A.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}

A.gallery:hover span {
Display:block;
Position:absolute;
width:402px;
height:290px;
top:39px;
left:170px;
padding:5px;
Font-style:italic;
Color: #000;
Background: #fff;
z-index:100;}

a.gallery:active {border:1px solid #eee;}
A.gallery:active span, a.gallery:focus span {
Display:block;
Position:absolute;
width:402px;
height:290px;
top:39px;
left:170px;
padding:5px;
Font-style:italic;color: #000; Background: #fff; z-index:50;}
#thumbs {width:840px; height:60px;}
#pad {height:310px; width:100px;}

For IE6

The following is a reference fragment:
<!--[If LTE IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<! [endif]-->

XHTML section

The following is a reference fragment:
<div id= "Info" >
<div id= "Pad" ></div>
<div class= "Slidek" ></div>
<div id= "Scrollbox" >
&LT;DIV id= "Thumbs" >
<a class= "Gallery Slidea" href= "#nogo" title= "fishes" >
<span>
&LT;BR/>pic2.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery slideb" href= "#nogo" title= "Funnels" >
<span>
&LT;BR/>pic3.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery Slidec" href= "#nogo" title= "vases" >
<span>
&LT;BR/>pic4.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery slided" href= "#nogo" title= "Window" >
<span>
&LT;BR/>pic5.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery Slidee" href= "#nogo" title= "Cascade" >
<span>
&LT;BR/>pic6.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery slidef" href= "#nogo" title= "Cascade" >
<span>
&LT;BR/>pic7.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery slideg" href= "#nogo" title= "Cascade" >
<span>
&LT;BR/>pic8.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery Slideh" href= "#nogo" title= "Cascade" >
<span>
&LT;BR/>pic9.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery Slidei" href= "#nogo" title= "Cascade" >
<span>
&LT;BR/>pic10.jpg<br/>photographs courtesy of Morguefile.com</span></a>
<a class= "Gallery Slidej" href= "#nogo" title= "Cascade" >
<span>
&LT;BR/>pic11.jpg<br/>photographs courtesy of Morguefile.com</span></a>
</div>
</div>

Viewing effects:http://www.cssplay.co.uk/menu/scroll_gallery.html