Изменение размера img при зависании приводит к перемещению других изображений

Question

У меня есть 4 изображения в строке в качестве ссылок, и я сделал их изменением размера при наведении курсора, но когда я наводил одну из картин, они изменяются, как я ожидаю, но другие, не зависающие изображения перемещаются вниз с 50px. Как избежать перемещения других фотографий?

Мой код: HTML:

<a href=""><img src="cover (1).jpg" class="cover"><a> 
<a href=""><img src="cover (2).jpg"class="cover"><a> 
<a href=""><img src="cover (3).jpg"class="cover"><a> 
<a href=""><img src="cover (4).jpg"class="cover"><a> 

Css:

img.cover{ 
height:100px; 
Width:100px; 
padding-top:25px;} 

img.cover:hover { 
height:150px; 
width:150px; 
margin-top:auto;} 

Answer 1

Если вы имеете в виду вы хотите другие фотографии, чтобы оставаться в том же положении, что вы ищете absolute positioning.

Если вы хотите, чтобы все четыре из них были выровнены сверху, а не снизу, замените margin-top:auto на vertical-align:top.

Answer 2

EDIT: Расширенный ответ with an example, чтобы показать все, что необходимо для абсолютного позиционирования, поскольку г-н Lister не понравился мой короткий вариант указывает просто на тот факт, что абсолютное позиционирование было необходимо, чтобы вывести их из потока:

HTML

<a href="" class="cover"><img src="cover (1).jpg" /></a> 
<a href="" class="cover"><img src="cover (2).jpg" /></a> 
<a href="" class="cover"><img src="cover (3).jpg" /></a> 
<a href="" class="cover"><img src="cover (4).jpg" /></a> 

CSS

.cover { 
    position: relative; 
    display: inline-block;  
    height:100px; 
    width:100px; 
    padding-top:25px;  
} 

.cover img { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border: 1px solid blue; 
} 

.cover img:hover { 
    height:150px; 
    width:150px; 
}