html - 过渡动画期间移动的文本

Question

伙计们，我对动画有疑问。我有一张图片在悬停时会进行一些过渡，但下方的文字会略微移动。我需要它留在原地，因为它会扰乱我的布局。我曾尝试使用此处类似问题中建议的绝对位置，但对我不起作用。您对我如何解决它有任何想法吗？

https://codepen.io/anon/pen/OdWLgw

<div class="album-item">
  <div class="album-img"><img src="https://is2-ssl.mzstatic.com/image/thumb/Music114/v4/97/e6/70/97e670f6-361b-a23d-617a-52bafcd631cd/075679854247.jpg/170x170bb-85.png" /></div>

  <div class="album-card">
    <h4>title</h4>
    <span>name</span> <span>released</span>
  </div>
</div>

.album-item {
  background-color: gray;
  width: 170px;
  margin: 25px;
}

h4 {
  align-content: center;
  margin: 5px;
}

.album-img {
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.8;
}

img:hover {
  -webkit-transform: scale(1.12, 1.12);
  transform: scale(1.12, 1.12);
  opacity: 1;
  border: 1px solid yellow;
  border-radius: 2px;
  cursor: pointer;
}

.album-card {
}

你可以看到它在这里几乎没有移动，但我有多个像这样的图 block ，它真的很乱，所以我需要文本留在一个地方。

Answer 1

如果您希望文本保持不变，请不要在两种状态之间更改其上方元素的几​​何形状。在您的情况下，您正在通过为元素的边框提供不同的宽度来更改大小。

要修复它，给非悬停元素一个相等的边框宽度和颜色透明。

.album-item {
  background-color: gray;
  width: 170px;
  margin: 25px;
}

h4 {
  align-content: center;
  margin: 5px;
}

.album-img {
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: -1px 0 0 -1px;
  border: 1px solid transparent;
  border-radius: 3px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.8;
  display: block;
}

img:hover {
  -webkit-transform: scale(1.12, 1.12);
  transform: scale(1.12, 1.12);
  opacity: 1;
  border-color: yellow;
  border-radius: 2px;
  cursor: pointer;
}

.album-card {
}

<div class="album-item">
  <div class="album-img"><img src="https://is2-ssl.mzstatic.com/image/thumb/Music114/v4/97/e6/70/97e670f6-361b-a23d-617a-52bafcd631cd/075679854247.jpg/170x170bb-85.png" /></div>

  <div class="album-card">
    <h4>title</h4>
    <span>name</span> <span>released</span>
  </div>
</div>