html - 悬停后使div保持原位

Question

我试图让 div 标签在悬停图像后保持原位。截至目前，当我将鼠标悬停在图像上时，div 会向右移动。我尝试使用固定位置和绝对位置，但没有运气。这是 HTML 代码:

<div>
<button class="buttonTest"></button>
</div>

在 CSS 中:

.buttonTest{
    background-image:  url('http://hd-wall-papers.com/images/wallpapers/random-       image/random-image-16.jpg');
    width:150px;
    height:150px;

}

div {
  border-style: solid;
  height:auto;
  width:150px;
}

div{
  transition: all .2s ease-in-out;
}

div:hover{
  border-width:75px;
  transform: scale(.5);
}

代码笔中:https://codepen.io/dxs6040/pen/gmPgzz/

Answer 1

使用 box-sizing:border-box 和一些改变。这是期望的行为吗？

.buttonTest{
background-image:  url('http://hd-wall-papers.com/images/wallpapers/random-image/random-image-16.jpg');
  width:100%;
  height:100%;

}


div {
  border-style: solid;
  height:150px;
  width:150px;
  transition: all .2s ease-in-out;
  box-sizing: border-box;
}

div:hover{
  border-width:15px;
  transform: scale(.80);
}

<div>
<button class="buttonTest"></button>
</div>
<div>
<button class="buttonTest"></button>
</div>