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

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



我尝试了一切。

我应用了 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

最佳答案

这对你有用:

我刚刚添加了 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>

希望这有帮助。

关于html - 使用填充在悬停时为图像添加边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51184785/