Add border to image on hover with padding - html

Question

I just want to add a border for the image with padding also I need transition effect. It's working fine but has a few problems :
it shows little movements in the image on hover(not fixed)
Transitions not smooth.
I tried everything.
I applied box-sizing:border-box; and gave the image a margin of 2px and removed it on hover but still no luck.
See this example. It's perfectly fine and the image is not moving on hover.
Here is my code :
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img {
border-radius: 50%;
margin: 2px;
transition: 0.2s ease-in-out;
}
.home-item1 img:hover {
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>
What am I missing? Please check the fiddle and let me know.
jsfiddle

Answer 1

This will work for you:
I have just added border: 4px solid transparent; and removed the margin and compensated it with the border and on hover reset it.
Fiddle
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border: 4px solid transparent;
border-radius: 50%;
padding: 0px;
transition:all 0.2s ease-in-out;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/110/110/" alt="">
</div>
Hope this was helpfull.

Answer 2

First, You need to add transparent border to image so that it
will not move when hovered.
Second, Increase the duration of transition to get smooth effect
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 50%;
margin: 2px;
transition: border 0.5s ease-in-out;
border: 2px solid transparent; /* Added */
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px; padding: 2px;
}
<div class="home-item1">
<img src="http://via.placeholder.com/350x150" alt="">
</div>

Answer 3

adding a border will add to the dimensions of the div which causes the movement.. adding color to a transparent border will not, it achieves the same effect.

Answer 4

I think all you need to do is to boost the transition period and just add border to the image so that the border could be seen for a good time on hover, thus showing a watery like, a bit moving effect to the image. Here it goes :
.home-item1 {
height: 105px;
width: 105px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 60%;
margin: 2px;
transition: border 0.6s ease-in-out;
border: 3px solid transparent;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/150/150/" alt="">
</div>