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

【问题标题】：how to create a css translateY on hover effect如何在悬停效果上创建 css translateY
【发布时间】：2016-04-22 22:32:34
【问题描述】：

我正在寻找创建一个我知道必须是可能的 CSS 悬停效果，但我无法解决它，并且想知道是否有一些明亮的火花能够为我指明正确的方向！

See this image here showing what I would like to achieve

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

这会带有 -webkit-transition translateY 元素吗？

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

【问题讨论】：

标签： css hover transform mousehover

【解决方案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>

【讨论】：

【解决方案2】：

是的，您必须使用 translateY 属性。

你要记住的三件事是：

transform: translateY(); - 这显然是为了定位

transition: transform 0.2s ease 0s; - 这是为了平滑移动

overflow:hidden; - 这是在您不悬停时隐藏底部。

这是一个小提琴：https://jsfiddle.net/bwu8ckhn/

代码：

.one {
  width:300px;
  height:300px; 
  margin: 50px auto;
  overflow:hidden;
  background-color:lightblue;
}

.two {
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.8);
  -webkit-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-transition: transform 0.2s ease 0s;
  transition: transform 0.2s ease 0s;
}

.one:hover .two {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

p {
  margin:0;
  padding: 1em;
  color:#ffffff;
}

<div class="one">
  <div class="two">
    <p>
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    </p>
  </div>
</div>

【讨论】：

【解决方案3】：

只是为了完整性和比较两种转换方法。

jsfiddle 有两个关于此悬停效果的示例。一个是position: top，另一个是transform: translateY

没有真正的区别。反复推出/翻转时 translateY 似乎更平滑（Paulie_D 已经在上面的答案中提到了性能提升）

【讨论】：