эффект translateX css при наведении - PullRequest
Новая
       9

эффект translateX css при наведении

0 голосов
/ 11 апреля 2019

Я хочу применить эффект translateX к заголовкам некоторых заголовков <h4>. Я протестировал код, и он работает, но я заметил небольшую проблему при выполнении эффекта. Проблема связана с положением элемента, где применяется перевод, потому что я хочу, чтобы эффект был виден только при наведении родительского div. Проблема в том, что он будет показан и ближайший элемент также, если он не парил.

Вот пример кода, я использую бутстрап 4 столбца карты. 

<div class="card-columns">
  <div class="card">
    <div class="overlay">
      <h4 class="title"><a href="#">link1</a></h4>
    </div>
  </div>
  <div class="card">
    <div class="overlay">
      <h4 class="title"><a href="#">link2</a></h4>
    </div>
  </div>
  <div class="card">
    <div class="overlay">
      <h4 class="title"><a href="#">link3</a></h4>
    </div>
  </div>
</div>  

<style>

.overlay{
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}

.card:hover .overlay{
opacity: 1;
}

.title{
transition: all 300ms;
transform: translateX(-200%);
}

.card:hover .title{
transition: all 300ms;
transform: translateX(0%);
}

</style>

Codepen demo https://codepen.io/anon/pen/oOWyVK

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Просто добавьте overflow: hidden;

.card-columns .card {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
1 голос
/ 11 апреля 2019

Попробуйте добавить overflow:hidden; внутри класса оверлеев, чтобы это было так 

.overlay{
  opacity: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
  overflow:hidden;
}

Это то, что тебе нужно?

У вас есть эта проблема, потому что вы выполняете translateX на -200%, поэтому title выйдет из вашей коробки, вам нужно скрыть с overflow:hidden; элемент title, который выходит из коробки :)

...