image moves when hover on - issue with the border

Question

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 the demo : http://jsfiddle.net/sathish_opr/03kkqywy/1/

When we hover on the image, image position changes.

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

what could be the problem ?

Answer 1

You either set an invisible border on the image in the normal state:

border: 3px outset transparent;

Or you could apply:

box-sizing: border-box;

This way, the border is calculated to the inside of the width and height. (the 200px width for example)

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

BTW: you don't need any prefixing on border-radius anymore. But if you do, allways put the non prefix property as the last one of those.

Answer 2

Now Define your

.fgimg{
border: solid 3px transparent;
}

Demo Link