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

Question

我想创建一个 CSS 悬停效果，我知道它一定是可行的，但我无法解决它，想知道是否有一些明亮的火花能够将我指向正确的位置方向！

See this image here showing what I would like to achieve

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

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

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

Answer 1

是的，您将不得不使用 translateY 属性。

您要记住的三件事是：

transform: translateY();——这明显是为了定位

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

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

这是一个 fiddle ：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>

Answer 2

是否有要翻译...没有，你可以用定位来做到这一点

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

.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>

Answer 3

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

A jsfiddle 其中有两个悬停效果示例。一个 position: top 另一个 transform: translateY

没有真正的区别。重复 rollout/rollover 时 translateY 似乎更平滑（Paulie_D 已经在他上面的回答中提到了性能提升）

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

how to create a css translateY on hover effect

css

transform

hover

mousehover