css - Scaling an image affects other elements around the targeted image -

basically i'm trying have set of images in row, , whenever hover on 1 of them image should enlarged , red border.

i'm using css transitions this.

my problem right when hover on image, surrounding images gets pushed down , little bit side.

one thing i've noticed if remove border transition effect works perfectly.

the html part simple:

<div id="menu">     <img src="img1" alt="" /> <img src="img2" alt="" /> <img src="img3" alt="" /> <img src="img4" alt="" /> <img src="img5" alt="" /> <img src="img6" alt="" /> <img src="img7" alt="" /> </div> 

as css:

#menu {     text-align:center;     margin-top:20px; } #menu img {     position:relative;     display:inline;     border:none;     transform:scale(1);     -webkit-transform:scale(1);     -moz-transform:scale(1);     z-index:1;     transition:transform .5s, border .5s;     -webkit-transition:-webkit-transform .5s, border .5s;     -moz-transition:-moz-transform .5s, border .5s; } #menu img:hover {     position:relative;     display:inline;     border: 3px #c00 solid;     border-radius: 2px;     transform:scale(1);     -webkit-transform:scale(1.3);     -moz-transform:scale(1);     z-index:10;     transition:transform .5s, border .5s;     -webkit-transition:-webkit-transform .5s, border .5s;     -moz-transition:-moz-transform .5s, border .5s; } 

what's problem , how fix it?

here's jsfiddle example.

you should add

#menu img {    border: 3px solid transparent; } 

explanation:

if learn css box-model architecture

border takes space around element , not inside element, when use border on hover, takes space around element , pushes other elements aside, , hence inorder prevent that, spoof place using border transparent color.

if want can use new css3 property, called box-sizing: border-box

complete cross browser

-moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;  

what do?

the borders, paddings etc counted inside box instead of calculating outside, can use these properties if don't need transparent border