html - 使用填充在悬停时为图像添加边框

Question

我只想为带有填充的图像添加边框，我还需要过渡效果。它工作正常，但有一些问题:

1. it shows little movements in the image on hover(not fixed)
2. Transitions not smooth.

我什么都试过了。

我应用了 box-sizing:border-box; 并给图像留了 2px 的边距，并在悬停时将其移除，但仍然没有成功。

查看此 example .非常好，图像不会在悬停时移动。

这是我的代码:

.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>

我错过了什么？请检查 fiddle 并告诉我。

jsfiddle

Answer 1

这对你有用:

我刚刚添加了 border: 4px solid transparent; 并删除了 margin 并用边框补偿它，并在悬停时重置它。 <强> 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>

希望这对您有所帮助。