Question

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

它在悬停时图像上几乎没有移动（不固定）

过渡不顺利。

我尝试了一切。

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

我想念什么？请检查小提琴，让我知道。

jsfiddle

Answer 1

首先，您需要向transparent添加image边框，以便悬停时不会移动。
第二，增加过渡时间以获得平滑效果

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img{
  border-radius: 50%;
  margin: 2px;
  transition: border 0.5s ease-in-out;
  border: 2px solid transparent; /* Added */
}

.home-item1 img:hover{
border: 2px solid red;
 margin: 0px; padding: 2px; 
}

<div class="home-item1">
  <img src="http://via.placeholder.com/350x150" alt="">
</div>

Answer 2

这将为您工作：

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

希望这对您有所帮助。

Answer 3

添加border会增加div的尺寸，从而导致移动。向透明边框添加颜色不会达到相同的效果。

Answer 4

我认为您需要做的就是增加过渡时间，只需在图像上添加边框，以便在悬停时可以很好地看到边框，从而对图像显示出像水一样的效果。它在这里：

    .home-item1 {
      height: 105px;
      width: 105px;
      cursor: pointer;
      box-sizing: border-box;
    }
    
    .home-item1 img{
      border-radius: 60%;
      margin: 2px;
      transition: border 0.6s ease-in-out;
      border: 3px solid transparent;
    }
    
    .home-item1 img:hover{
      border: 2px solid red;
      margin: 0px; 
      padding: 2px; 
    }

<div class="home-item1">
      <img src="http://lorempixel.com/150/150/" alt="">
    </div>

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

4 个答案: