Перевести зависит от размера контента - PullRequest
Новая
       15

Перевести зависит от размера контента

0 голосов
/ 25 октября 2018

Я недавно создал контейнер проекта, который имеет эффект наведения 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 содержимое всегда отображалось в одной и той же позиции независимо от того, сколько текста я написал.

1 Ответ

0 голосов
/ 25 октября 2018

Один из способов - использовать абсолютное позиционирование вместо перевода.Преимущество абсолютного позиционирования заключается в возможности установить нижнюю часть содержимого. 

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