Strange Hover Bug

Question

I have a responsive Modal Box with Images.

Code:

http://jsfiddle.net/YCcNY/34/

In it, when you hover the images become bigger. Sometimes, when hovering over the last pic in the 1st row, the format breaks. If it doesn't for you resize the window.

Does anyone know how to fix this ?

Answer 1

Zoltan's answer is very good. You could also consider using CSS transforms for the scaling. The images will be slightly blurry, but the upside is that transforms doesn't affect the actual size of the image, just the way it is rendered.

li:hover img {
    -moz-transform: scale(1.1);
}

Answer 2

That's the normal behavior for floated elements with no height. To fix it give a fixed height to your li items - DEMO

.PhotoContent li {
    width: 20%; 
    height: 100px; /* THIS */
    float: left;
    font-weight: 200;
    clear:none;
    color: rgb(150,150,150);
    cursor: pointer;
    outline: 0px solid green;
}