Showing just part of an image?

HTML & CSS
1

I am making a website for a painter. There are different categories of paingings that are displayed in different listings. In the sitebar I would like to show the most recent work with small thumbnails (smaller then the once used in the listings) and a title and text. For the small thumbnails I would like to use the thumbnails that i already have for the listings but I would like to show just a fraction of it. So I decided to use an image holder from 125px x 125px with the property overflow set to hidden and to place the image inside that holder. But somehow it shows the entire thumbnails. This is what I have:

CSS:


#latest {
  width:94%;
  height: 250px;
  margin: 30px 3% 0px;
  position:relative;
  float: left;
  overflow: hidden;
  background-color: transparant;
}

#latest li {
  width: 100%;
  height: 125px;
  display: block;
}

#latest li.holder {
 width: 123px;
 height: 123px;
 float: left;
 overflow: hidden;
 border: solid 1px #4F81B2;
 position: relative;
 z-index: 0;
}

#latest li.holder img {
 position: absolute;
 left: -50%;
 top: -50%;
 z-index: 0;
}

HTML


<ul id="latest">
	<li>
		<div class="holder"><img src="latest/diem.jpg" alt=""></div>
  </li>

	<li>
		<div class="holder"><img src="latest/miles_davis.jpg" alt=""></div>
  </li>

	<li>
		<div class="holder"><img src="latest/peter_diem.jpg" alt=""></div>
  </li>
</ul>

As you can see did I set the z-index of the image to 0 where the holder has the z-index set to 1.

What am I doing wrong?

Thank you in advance.

2

donboe, in your example, class “holder” is assigned to a <div> in HTML and to a <li> in css. An oversight?


#latest li.holder {

<li>
    <div class="holder">