Resizing img when hovering makes other images move

Question!

I have 4 pictures in a line as links and I made them resize when hovering, but when I hover one of the pictures it resize as I expect it to do but the other un-hovered images moves down with 50px. How do I avoid the other pictures moving down?

My code is: 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;}


Answers

EDIT: Expanded the answer with an example to show all that is necessary for the absolute positioning, since Mr Lister did not like my shorter version pointing simply to the fact that absolute positioning was needed to take them out of flow:

HTML

By : ScottS


This video can help you solving your question :)
By: admin