Reputation: 548
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" />
Upvotes: 1
Views: 1576
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