Display a sliding photograph horizontal gallery. Using tips and tricks from CSS Play (Stu Nicholls)
Running ...


The Sliding Gallery


  • From the page of the author : CSS Play - Stu Nicholls : This gallery is simple. It is just an unordered list of images that are normally compressed horizontally. When you hover over one of these compressed images it expands to full size


The Main Container



  • We use a picture (495 x 240) as background of an unordered list


#gallery_horizontal
{
padding: 0;
margin: 0 auto 5em auto;
list-style-type: none;
overflow: hidden;
width: 495px;
height: 240px;
border: 1px solid #888;
background:#fff url(http://YOURSITE/back_slide.gif);
}



The List



  • We use floating left for the horizontal list
  • We define the anchor as display: block


#gallery_horizontal li
{
float: left;
}

#gallery_horizontal li a
{
display: block;
height: 240px;
width: 28px;
float: left;
text-decoration: none;
border-right: 1px solid #fff;
cursor:default;
}

#gallery_horizontal li a img
{
width: 27px;
height: 240px;
border: 0;
}


Pseudo-Class to expand the picture



#gallery_horizontal li a:hover
{
background: #eee;
width: 320px;
}

#gallery_horizontal li a:hover img
{
width: 320px;
}


HTML code




<ul id="gallery_horizontal">

<li>
<a href="#"
onMouseover="window.status='some text'; return true;" onMouseout="window.status=' '; return true;">
<img src="URL of picture 1span>"
alt="alt text 1" title="title of picture 1">
</a>
</li>
...
...
</ul>



The Result




More Informations




One Day - One Label - One Wine