CODEWITHSUNDEEP
htmlcssimagehover
Toke Juhoklee Kejlow Nielsen
Toke Juhoklee Kejlow Nielsen

Reputation: 45

Resizing img when hovering makes other images move

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

Upvotes: 2

Views: 2436

Answers (2)

ScottS
ScottS

Reputation: 72281

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

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

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46619

If you mean you want the other pictures to remain in the same position, you're looking for absolute positioning.

Or if you only want all four of them to align to the top instead of the bottom, replace themargin-top:auto with vertical-align:top.

Upvotes: 2

Related Questions