CODEWITHSUNDEEP
htmlcss
TwoShorts
TwoShorts

Reputation: 548

Stop images from shaking page on resizing

I have several images that are in a line that will resize on hover so that the user knows that the image is being selected. The problem is that when you move from one image to the next, all the rest of the images move downwards. Additionally, when moving quickly from one image to the next, the screen appears to shake. How can I fix this?

img{
  margin:10px;
}
img:hover{
  width:100px;
  height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />

http://jsfiddle.net/sgqsn618/

Upvotes: 1

Views: 1576

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20399

To fix this, add vertical-align: top to your images. Also, to prevent the screen from looking so shaky, add a transition to your images.

img{
    margin:10px;
    vertical-align: top;
    transition: all 200ms ease;
}
img:hover{
    width:100px;
    height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />

Upvotes: 4

Related Questions