html – 使用填充悬停时添加图像边框

我只是想用填充为图像添加边框,我也需要过渡效果.它工作正常,但几乎没有问题.

>它显示悬停时图像中的小动作(未固定)
>过渡不顺利.

我尝试了一切.

应用.
箱尺寸：边界盒;
给图像边缘2px并在悬停时删除它但没有运气.看这个例子.它完全没问题.图像不会在悬停时移动. http://css-snippets.com/demos/hover-border.html

这是我的代码

.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

解决方法

这对你有用：

我刚刚添加了边框：4px实心透明;并删除边距并用边框补偿它并悬停重置它.
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>

希望这有用.