Question

I have a small jQuery based script for animating the border on images that you hover upon.

$(document).ready(function(e) {
    $(".oa-article a img").mouseover(function(e)
    {
        $(this).css('border-style', 'solid');
        $(this).css('border-color', '#C63');
        $(this).animate(
        {
            borderWidth: "5px",
        }, 100, function() 
        {
            // Animation complete.
        });
});


$(".oa-article a img").mouseleave(function(e)
    {
        $(this).animate(
        {
            borderWidth: "0px"
        }, 200, function() 
        {
            // Animation complete.
        });
    });

});

The problem is; when that border is animated to 5px, it (obviously) adds those pixels to the width and height, and that results in some unwanted repositioning of other image links next to it (it’s a gallery that has 4 images in a row, and so on).

I tried to absolute position them, but that borked the parent/child behavoiur thus making the page not grow from the images. The thing is though, the absolute positioning made it work like I wanted to. The border grew and did not affect any of the other image positions. That is what I want: When the border grows from 0 to 5 px, I don’t wan’t anything else to be affected by this in any way.

Any help would be greatly appreciated,
Thanks!

Answer 1

box-sizing: border-box makes for the border to be included in the width/height (so that adding a border doesn’t make the element grow): http://jsfiddle.net/8GdZy/1/.

img {
    box-sizing: border-box;
}​

The image itself is then shrinked.