Масштабирование изображения влияет на другие элементы вокруг целевого изображения.

Question

В основном, что я пытаюсь сделать, чтобы иметь набор изображений подряд, и всякий раз, когда я наводил на одного из них, изображение должно быть увеличено и получить красную границу ,

Я использую для этого CSS-переходы.

Моя проблема прямо сейчас заключается в том, что, когда я наводил на изображение изображение, все окружающие изображения задвигаются вниз и немного вбок.

Одна вещь, которую я заметил, заключается в том, что если я удалю переход границы, эффект будет работать отлично.

HTML-часть очень проста:

<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> 

Что касается 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; 
} 

Что проблема и как я могу это исправить?

Here's a JsFiddle example.

Answer 1

Вы должны добавить

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

Объяснение:

Если вы узнали о CSS коробчатого модели архитектуры

Border занимает пространство вокруг элемент, а не внутри элемента, поэтому, когда вы используете границу при наведении, она фактически занимает пространство вокруг элемента и подталкивает другие элементы asid e, и, следовательно, чтобы предотвратить это, мы подменяем это место, используя границу с прозрачным цветом.

Если вы хотите, вы можете также использовать новый CSS3 свойство, которое называется box-sizing: border-box

Полный Cross Browser

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

Что это делать?

границы, отступы и т.д., будет подсчитано внутри коробки вместо того чтобы вычислять вне, так что вы можете также использовать эти свойства, если вам не нужно transparent границы

Answer 2

просто положить границы прозрачны

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

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

Answer 3

fiddle

здесь посмотрите на fiddl e вы масштабировании к 1, что он уже был. Я изменил его на 1.3 :)