如何在动态图片下隐藏文字

Question

所以我有代码将图像悬停在它的容器上时将图像移出视图但是我想要做的是在整个时间内在图像下面有文本，然后在图像滑到一边时显示该文本。我该如何定位图像下的文字？

代码：https://jsfiddle.net/ff9ovhvp/6/

.row {
  border: 2px solid black;
  width: 500px;
  overflow: hidden;
}
img {
  transition: 3.5s;
}
.imgHold:hover>img {
  transform: translateX(500px);
}

<div class="row">
  <div class="imgHold">
    <img src="https://placehold.it/300x100">
    <h3>
          Some text here
        </h3>
  </div>
</div>

Answer 1

您可以使用定位将文本放在图像后面，相对于容器，绝对放在h3上：

.row {
  border: 2px solid black;
  width: 500px;
  overflow: hidden;
}
img {
  transition: 3.5s;
}
.imgHold:hover>img {
  transform: translateX(500px);
}
.imgHold {
  position: relative;
}
.imgHold h3 {
  position: absolute;
  top: 0;
}
.imgHold img {
  z-index: 1;
  position: relative;
  vertical-align: top;
}

<div class="row">
  <div class="imgHold">
    <img src="https://placehold.it/300x100">
    <h3>
      Some text here
    </h3>
  </div>
</div>