html - 根据内容大小进行翻译

Question

我最近创建了一个元素容器，它具有 translate 悬停效果以在悬停时显示正文文本。

.container {
  width: 400px;
  height: 400px;
  overflow: hidden;
  background-image: url('https://images.wallpaperscraft.com/image/road_twisty_turn_129164_3840x2160.jpg');
  background-size: cover;
}

.text {
  color: #fff;
  font-family: helvetica;
  text-transform: capitalize;
  transform: translatey(300px);
  padding: 20px;
}

.container:hover .text {
  transform: translatey(240px);
}

<div class="container">
  <div class="text">
    <h1>project name</h1>
    <p>body copy will be here and hidden untill hovered.</p>
  </div>
</div>

我面临的问题是，文本翻译位置会根据我要编写的内容量而有所不同。

我想做的是，当我将鼠标悬停在 div 上时，无论我写了多少文本，内容总是显示在相同的位置。

Answer 1

一种方法是使用绝对定位而不是平移。绝对定位的优点是可以设置内容的底部。

.container {
  width: 400px;
  height: 400px;
  overflow: hidden;
  background-image: url('https://images.wallpaperscraft.com/image/road_twisty_turn_129164_3840x2160.jpg');
   background-size: cover;
   position:relative;
}

.text {
  color: #fff;
  font-family: helvetica;
  text-transform: capitalize;
  position:absolute;
  top:300px; bottom:auto;
  padding: 20px;
 }
 
.container:hover .text {
  top:auto; bottom:0;
 }

<div class="container">
  <div class="text">
    <h1>project name</h1>
    <p>body copy<br>will be<br>here and<br>hidden until<br>hovered.</p>
  </div>
</div>
<hr>
<div class="container">
  <div class="text">
    <h1>project name</h1>
    <p>body copy will be here and hidden until hovered.</p>
  </div>
</div>