Как сделать плавное появление текста внутри блока?

Question

Как сделать так, чтобы текст внутри оранжевого блока с белой стрелкой плавно появлялся текст и при этом стрелка в состоянии покоя находилась в центре блока, а когда появляется текст плавно смещалась вправо. Лучшего способа появление текста как через display: block при наведении я не знаю, но на это свойство не работает transition, а при visibility стрелка смещается.

сайт cn39614.tmweb.ru

Весь код jsfiddle.net/6opzqdu5/

Как у меня

Как надо

.spaces-gal .owl-item:hover .spaces-slide .details {
  width: 250px;
}
.spaces-gal .owl-item:hover span {
  display: block;
}
 
.spaces-slide .details {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  background-color: #ff5722;
  transition: width 0.3s;
  width: 70px;
  height: 70px;
}
.spaces-slide .details span {
  display: none;
  font-size: 18px;
  color: #fff;
  transition: 0.3s;
}
.spaces-slide span {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #222831;
  display: flex;
  justify-content: center;
}

Answer 1

Я сделал плавный эффект c изменением opacity и transform для элемента span, добавив overflow: hidden для элемента .details:

.spaces-slide .details {
  overflow: hidden;
}

Первоначальное состояние текста:

.spaces-slide .details span {
    display: block;
    font-size: 18px;
    color: #fff;
    transition: 0.3s, opacity 0.3s ease-in-out, translate3d 0.3s ease-in-out;
    opacity: 0;
    transform: translate3d(-100px, 0,0);
}

При наведении:

.spaces-gal .owl-item:hover span {
    transform: translate3d(0,0,0);
    opacity: 1;
}

Также выровнять стрелку получилось при изменении значения margin-left

Первоначальное состояние:

.owl-item .details i.fas.fa-chevron-right {
    margin-left: -125px;
    transition: 0.3s;
}

При наведении:

.owl-item:hover .details .fas.fa-chevron-right {
    margin-left: 20px;
}

БЛОГ НА HUSL

Как сделать плавное появление текста внутри блока?

Ответы (1 шт):