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>

翻译取决于内容大小

1 个答案: