Add border to image on hover with padding

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 :

1. it shows little movements in the image on hover(not fixed)
2. 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>