Question

我正在尝试在悬停个人资料照片时创建动画。

基本上父div有圆角，因此图像看起来像一个圆圈。当悬停它时，边框从0px增加到7px。问题是位于子div内的图像正在缩小，因为我已将其宽度设置为100％。

我无法为图像设置固定宽度，因为图像必须填充大小的div。

有没有办法解决这个问题？

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 0px solid rgba(255, 255, 255, 0.4);
}

.element:hover {
  transition: all 0.4s;
  box-shadow: 12px 12px 25px 0px rgba(0, 0, 0, 0.20);
  border: 7px solid rgba(255, 255, 255, 0.4);
}

.element img {
  width: 100%;
}

<div class="element">
  <a href="action"><img src="//myapp.s3-eu-west-1.amazonaws.com/image" alt="alt" /></a>
</div>

Answer 1

以下是您可以实现所需目标的示例。我删除了一些不相关的样式以使其更简单。

您只需在element内创建另一个边框，然后使用它来为悬停设置动画，而不是使用element的边框，这样您的图像开始时就不会很小了悬停时不会改变大小

https://jsfiddle.net/py04y4x1/2/

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 0px solid transparent;
}

.element:hover .border {
  transition: all 0.4s;
  border: 7px solid red;
}

.element img {
  width: 100%;
}

.border {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 7px solid transparent;
  border-radius: 50%;
}

HTML

<div class="element">
  <div class="border"></div>
  <a href="action"><img src="https://lh3.googleusercontent.com/VT-PqxMMsA2wPy7kzmuKGDIzaA3AGuXKExqnfOfwTEy5AvLIMTranbfNGheRr457RD4=w300" alt="alt" /></a>
</div>

扩大边框正在改变子元素

1 个答案: