CSS for Image Display

HTML:

<Div id = "Wrap">


<Ul>
<Li> <a href = "# image1" id = "2"> </a> </LI>
<Li> <a href = "# image2" id = "3"> </a> </LI>
<Li> <a href = "# image3" id = "4"> </a> </LI>
<Li> <a href = "# image4" id = "5"> </a> </LI>
<Li> <a href = "# image5" id = "6"> </a> </LI>
</Ul>

<Div id = "Images">
<Div> <a id = "image1"> </a> </div>
<Div> <a id = "image2"> </a> </div>
<Div> <a id = "image3"> </a> </div>
<Div> <a id = "image4"> </a> </div>
<Div> <a id = "image5"> </a> </div>

</Div>

</Div>

 

 

CSS:

*{
Margin: O auto;
Padding: 0 ;}

Body {
Margin: 0;
Padding: 0;
Background-color: #111;
Color: #888 ;}

A {
Text-Decoration: none;
Color: #660066 ;}

Ul {
List-style: none;
Float: left;
Width: 125px;
Margin: 0 auto;
Border-Right: 5px solid black;

}

Ul Li {
Height: 60px;
Border-Right: 10px solid black;
}

Ul Li a IMG {
Filter: alpha (opacity = 40 );
Width: 110px;
Opacity: 0.4 ;}

Height: 60px ;}

Ul Li A: hover IMG {
Filter: alpha (opacity = 100 );
Opacity: 1.0;
}

# Images {
Width: 500px;
Height: 300px;
Overflow: hidden;
Float: left;
Border-Right: 10px solid black ;}

# Wrap {
Width: 700px;
Height: 300px;

}

The image used is 500*300