Use box-sizing: "border-box" and keep image dimensions

css

Solution

Solution #1 Outline property. Try to use `outline` instead of border with negative outline-offset value equal to outline width:

img:hover {
    box-sizing:border-box;
    outline: solid 10px #f80;
    outline-offset: -10px;
}

http://jsfiddle.net/dfsq/BPRyZ/2/

Also since IE does not understand this property you can leave `box-sizing` to be used by IE8+.

Solution #2 Using div as wrapper + `:after`:

<div class="img-wrap">
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>

CSS:

.img-wrap:after {
    border: 0;
}
.img-wrap:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: solid 10px #f80;
}

http://jsfiddle.net/dfsq/BPRyZ/7/

Problem

If I use `box-sizing: "border-box"` for images the images will get smaller, like on hover: Example JsFiddle Is it possible to do the same effect without the image getting cropped?

Original source