Mouse-over effect on image effects other images

I want to execute a simple effect on an image wall.

http://www.concept-it.be/sodrie3/collectie.html

However when I use the following code:

$('.coll_img').hover(
function(){
     var cssObj = {
    "border" : "1px dashed",
    "width" : "205px"
     }
     $(this).css(cssObj);
},
function(){
     var cssObj = {
    "border" : "0",
    "wid开发者_Python百科th" : "205px"
     }
     $(this).css(cssObj);
}
);

the effect is done, but the other images are affected too.

I want to keep it simple (prefer no plugins).

I suppose i need to add something to my css code.

grtz and thanks in advance

The border is adding 1px to the size of the image which is changing your formatting, you'd need to either alter the width to be 2px less for the hover image (203px, 1px for left and 1px for right border) or set the image padding to 1px when there is no hover

edit: You may want to use a separate <img /> tag and load in the "zoomed in" image on hover so the formatting of your images doesn't get out of whack when you increase the width and add a border

something like on hover the extra image src gets updated to the hovered image and set the position to absolute, set the top and left coordinates to match the hovered image

You can do this without any jQuery at all:

http://jsfiddle.net/jtbowden/QkMss/embedded/result/

The key is to size your li elements to be the same as your images, float the li elements, and then adjust the size, margins, and z-index of the img (not li) with :hover. Make sure your img is absolutely or relatively positioned so that it's z-index works correctly.

This works in the latest version of all major browsers as far as I tested.

I dont think other images are affected, because there is no border on other images when you hover on one. Neither the problem is with the width of the image, as the container has enough width to accommodate the zoomed image.

The problem is with the HEIGHT. The zoomed image causes the hovered image to change its height to 102.5 from 100px plus additional 2 px from border top & bottom, so the image below which has float:left set, cannot float just below the image which is hovered, due to increased height of the above image.

You can correct this by applying the "height:109px;" css rule to ".collection li" in your styles.css. I know this leaves some space between each row of images, but i could not think of any other solution.

Set 1px border for normal (non-hover) state too, you can try invisible as border color. I would recommend you to use only pure CSS:

.coll_img {
    border: 1px solid invisible;
}

.coll_img:hover {
    border: 1px dashed black;
}

If you don't like the 1px gap between images you could try margin: -1px on hover, probably together with position: relative (to bring it to front).

Setting smaller fixed width on hover is not complete solution - you need to set height too :)