21
Июл
2021

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

Как сделать так, чтобы текст внутри оранжевого блока с белой стрелкой плавно появлялся текст и при этом стрелка в состоянии покоя находилась в центре блока, а когда появляется текст плавно смещалась вправо. Лучшего способа появление текста как через 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;
}

Источник: https://ru.stackoverflow.com/questions/1307262/%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%BF%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B5-%D0%BF%D0%BE%D1%8F%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%B2%D0%BD%D1%83%D1%82%D1%80%D0%B8-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0

Тебе может это понравится...

Добавить комментарий