CSS .fgimg { width: 200px; hei...">
Geek Answers Handbook

Image moves when you hover over - question with border

Below is the code

HTML

<div class="fgimg"> </div>

CSS

 .fgimg { width: 200px; height: 200px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat; margin-left:30%; margin-top:10px; background-position: center center; } .fgimg:hover { cursor:pointer; border-radius: 210px; border-color:#226fa3; border:outset; -webkit-border-radius: 150px; -moz-border-radius: 150px;

}

Here is a demo: http://jsfiddle.net/sathish_opr/03kkqywy/1/

When we point the image at the image, the position of the image changes.

I would like to see the border color of the image on hover, but the position of the image changes automatically: (

what could be the problem?

+7
html css css3
source share
4 answers

You either set the invisible frame on the image in the normal state:

 border: 3px outset transparent;

Or you can apply:

 box-sizing: border-box;

Thus, the border is calculated taking into account the width and height. (e.g. 200 pixels wide)

DEMO TIME: http://jsfiddle.net/03kkqywy/4/

BTW: You no longer need a prefix on the border radius. But if you do, always set the non prefix property as the last one.

+10
source share

Now define

 .fgimg{ border: solid 3px transparent; }

Demo link

+3
source share

This is because you did not set the border of the image first. When you hover, the border is added to the total width of the image, and therefore, you can see it move .

First set the transparent border of the image. Thus, a border has already been added o the width of the image, and the image will not move when you hover over it.

 .fgimg{ border:outset; border-color: transparent; }

http://jsfiddle.net/sathish_opr/03kkqywy/1/

+3
source share

css code

 .fgimg { width: 200px; height: 200px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat; margin-left:30%; margin-top:10px; background-position: center center; border: solid 3px transparent; } .fgimg:hover { cursor:pointer; border-radius: 210px; border-color:#226fa3; border:outset; -webkit-border-radius: 150px; -moz-border-radius: 150px; }

url http://jsfiddle.net/03kkqywy/3/ demo

+1
source share

More articles:


All Articles