html 图像加边框,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;

}

我错过了什么,请检查小提琴,让我知道？