Текстовый переход при наведении изображения - PullRequest
Новая
       18

Текстовый переход при наведении изображения

0 голосов
/ 07 ноября 2018

Я пытаюсь установить переход CSS для текста на изображении при наведении, как это -> https://victorthemes.com/themes/glazov/portfolio-grid/

Я пытался сделать это с помощью функции cubic-bezier (), но безрезультатно.

Вот мой код. 

* {
  margin: 0;
  padding: 0;
  border: 0;
}


.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">Teext.</p>
</div>

Пожалуйста, дайте мне несколько советов, как это сделать.

Ответы [ 3 ]

0 голосов
/ 07 ноября 2018

Хорошо, во-первых, я бы предложил использовать "all" для элемента перехода вместо определения одинаковых значений для всех свойств, которые вы хотите перевести. 

transition: all .2s;

Во-вторых, давайте сделаем правильный вывод Безье. Я думаю, что это достаточно близко: 

cubic-bezier(1.000, 0.215, 0.355, 0.990)

Таким образом, правильность перехода должна выглядеть следующим образом: 

transition: all .2s cubic-bezier(1.000, 0.215, 0.355, 0.990);

Для текстовой анимации я предлагаю использовать animate.css и использовать fadeInLeft.

0 голосов
/ 08 ноября 2018

Чтобы затемнить изображение, вам нужно изменить его непрозрачность. Чтобы увеличить изображение, использовать масштабное преобразование и переместить текст заголовка, вам нужно преобразование translateX. Примените эти стили CSS и их соответствующие переходы (вам нужен переход на изображении, а также в тексте), и у вас останется следующее: 

* {
  margin: 0;
  padding: 0;
  border: 0;
}


.img__wrap {
  position: relative;
  background: black;
  height: 200px;
  width: 257px;
  overflow: hidden;

}
.img__img {
    opacity: 1;
    transition: all 0.2s;
}
.img__description {
    position: absolute;
    color: #fff;
    transition: all .2s;
    left: 15px;
    right: 0;
    bottom: 15px;
    transform: translateX(-100%);
}

.img__wrap:hover .img__img {
    opacity: 0.5;
    transform: scale(1.2);
}
  
.img__wrap:hover .img__description {
    transform: translateX(0);
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">Teext.</p>
</div>
0 голосов
/ 07 ноября 2018

Я использовал transform: translate(); для перемещения объекта. Поиграйте с кубическим Безье здесь , чтобы добиться идеальной анимации. Но я использовал то же, что было на сайте, который вы разместили в качестве примера. Также я удалил opacity, visibility

* {
  margin: 0;
  padding: 0;
  border: 0;
}


.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  transform: translateX(-100%);
  transition: all 600ms cubic-bezier(0.645, 0.045, 0.095, 1.08);
}

.img__wrap:hover .img__description {
  transform: translate(0);
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">Teext.</p>
</div>
...