CODEWITHSUNDEEP
htmlcssimage
Smit thakkar
Smit thakkar

Reputation: 3

why does All the images shake when hovered

I have created a webpage with three images with a css property which gives it a border when hovered but when i hover all the image move a little from their origional position also how to align all the images in center JSFIDDLE DEMO HERE!

<head>
<title>Play Stone Paper scissors
</title>
<style>
img {
    margin:40px;
    margin-left:10px
    }
img:hover{
    border:dashed;
    border-color:#4DFFFF;
}
div{width: 90%; margin: 0px auto;
margin-top:40px;}

</style>
</head>
<body>
<div>
<img src="rock.jpg">
<img src="paper.jpg">
<img src="scissors.jpg">
</div>

Upvotes: 0

Views: 1202

Answers (2)

TimSPQR
TimSPQR

Reputation: 2984

I made a very small change in KnowHowSolutions original idea - thanks! - and wonder what people would think about a different approach - FIDDLE.

Put the full border in, but make it tansparent, and when hovered, change the color.

Is there any downside to this?

CSS

img {
  margin: 40px;
  margin-left: 10px;
  border: dashed;
  border-color: transparent;
}
img:hover{
  border-color: #4DFFFF;
}

Upvotes: 0

KnowHowSolutions
KnowHowSolutions

Reputation: 680

The answer is the border itself. It changes your dom's element width. Border itself doesn't have an off state of the same width, which is what you are expecting.

Rather you need to create the off state width to remove this shake.

Either an off state with the border width or some other margin/padding to compensate.

http://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Similar to : How can we avoid the shake when we hover over an element and set its border?

From the linked SO question above, fixed fiddle: http://jsfiddle.net/smitkhakhkhar/tn9Kj/

Added

border:dashed;
border-color:transparent;

Upvotes: 2

Related Questions