Image scaling affects other elements around the target image.

Question

Basically, I'm trying to do this in order to have a set of images in a row, and whenever I hover over one of them, the image should be zoomed in and get a red frame.

I use CSS transitions for this.

My problem right now is that when I hang over the image, all the surrounding images are pushed down and a little to the side.

One thing I noticed is that if I remove the border transition, the effect will work fine.

The html part is very 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> 

Regarding 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 is the problem and how to fix it?

Here is an example JsFiddle.

Answer 1

You must add

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

Explanation:

If you learn about CSS box-model architecture

The border takes up space around the element, not inside the element, so when you use the border on hover, it actually takes up space around the element and throws the other elements to the side, and therefore, to prevent this, we replace this place using a border with a transparent color.

If you want, you can also use the new CSS3 property called box-sizing: border-box

Full cross browser

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

What does it do?

Borders, gaskets, etc. will be counted inside the field instead of being calculated outside, so you can also use these properties if you don't need a transparent border

Answer 2

Simple put border transparent

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

http://jsfiddle.net/N9Zdq/2/

Answer 3

fiddle

here look at fiddl e you scaled to 1 that it already was. I changed it to 1.3 :)