CSS display image list

One of them

/*---------------------------------------------*/
/* ----------- Gallery code start --------------*/
/*---------------------------------------------*/
. Gallery {
Margin: 0; padding: 0;
Overflow: hidden;/* clears the floats */
Width: 100%;/* IE and older opera fix for clearing, they need a dimension */
List-style: none;
}
. Gallery Li {
Float: left;
Display: inline;/* for IE so it doesn't double the 1% left margin */
Width: 23.8%;
Margin: 0 0 10px 1%; padding: 10px 0;
Height: 83px;/* Height of IMG (75) + 2 times 3px padding + 2 times 1px border = 83px */
Position: relative;/* This is the key */
Background: URL (http://dnevnikeklektika.com/css/en-gallery/45degree.png );
}
. Gallery,
. Gallery IMG {
Display: block;
Width: 100%;
}

A img {border: none;}/* a small fix */

. Gallery A: link,
. Gallery A: visited,
. Gallery A: focus,
. Gallery A: hover,
. Gallery A: active {
Padding: 3px;
Background: # eeefef;
Width: 75px; Height: 75px;
Border: 1px solid # eeefef;/* We blend the border with the BG, as if it isn' t there */
Position: absolute; top: 50%; left: 50%;/* position it so that image's top left corner is in the center of the list item */
Margin:-41px 0 0-41px;/* Pull the image into position with negative margins (margins value is half of the width of the image )*/
}
. Gallery A: hover {
Border-color: # dfdfdf;
}

/* These are all optional, for decoration purpouses only */
. Gallery {
Border-bottom: 2px solid #000;
Padding-bottom: 10px;
Margin-top: 10px;
}

<Ul class = "Gallery">
<Li> <a href = "#" Title = "klik za ve ik u sliku"> </a> </LI>