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

Question

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

1. 它在悬停时显示图像中的微小移动（不固定）
2. 过渡不顺畅。

我尝试了一切。

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

请参阅此示例。一切都很好，并且图像在悬停时不会移动。

这是我的代码：

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

我缺少什么？请检查小提琴并告诉我。

jsfiddle

Answer 1

这对你有用：

我刚刚添加border: 4px solid transparent;和删除了它margin并用边框对其进行了补偿，然后在悬停时重置它。 小提琴

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

希望这对您有所帮助。