Reduce Image Width Without Resizing (e.g. crop image dynamically)

Question

The best way for me to explain my problem is to basically just give you this link:

http://www.tarmac.co.uk/default.aspx?landing=false

On this web page there a some kind of Javascript slideshow with a twist. The images are crammed into the box, but they are not resized, just overlapping. On hover, the images return to their original size, then shrink back.

I was wondering how this is possible?

I thought of the whole "position: relative" malarky but im not sure if this is the way forward.

So I tried to make it, I used "float: left" and "display: inline" to line images up, but then they wrap over.

I also tried "width: auto" but I feel that... I just cant see how to do it?

If anyone can link to a tutorial that would be better, but I couldn't find any!

Cheers,

Alex

Answer 1

On the page you provided images just lying into the li and the width property of li changes on hover.

So I think, you have to put image into the some container and modify container's width.

Try this fiddle: http://jsfiddle.net/L3sCC/