css - 如何在悬停效果上创建 css translateY

Question

我想创建一个我知道一定可行的 CSS 悬停效果，但我就是无法解决它，想知道是否有一些明亮的 Spark 能够为我指明正确的方向!

See this image here showing what I would like to achieve

因此显示了图像上方的 div 中的一些文本，但是当您将鼠标悬停在图像/文本 div 上时，内容以平滑的方式向上移动

这会与 -webkit-transition translateY 元素一起使用吗？

提前感谢您提供的任何建议或指南!亚当

Answer 1

它有要翻译吗...没有，你可以通过定位来做到这一点。

可以说，使用翻译方法可能对性能更好。

.one {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  overflow: hidden;
  background-color: #663399;
  position: relative;
}
.two {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 80%;
  transition: top .5s ease;
  color: white
}
.one:hover .two {
  top: 0;
}
p {
  margin: 0;
  padding: 1em;
  color: #ffffff;
}

<div class="one">
  <div class="two">
    <h2>Content</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aut provident quasi veniam earum officiis vero odit doloribus blanditiis? Veritatis ab repudiandae non labore eligendi quasi officia quibusdam accusamus sit harum quisquam soluta tempore,
      odio at, iste animi numquam officiis, quam ipsa! Fuga suscipit temporibus perspiciatis explicabo ipsa laudantium aut.
    </p>
  </div>
</div>