How to change the z-index of the display: element of the built-in block?

Question

I'm trying to simulate coverflow user interface: jsFiddle

As you can see on the right, the last image covers the second last image. How to get around this problem, or is there a better method than display: an inline block. I try to avoid using position: absolute, as this involves calculating the position for each individual image.

Answer 1

See: http://jsfiddle.net/qqWMb/1/

li:nth-last-child(2) { position: relative; z-index: 1 } 

http://reference.sitepoint.com/css/pseudoclass-nthlastchild