0

Как сделать чтобы при наведении на блок, текст красиво спускался сверху вниз? Как-нибудь через CSS можно? Или же лучше использовать JQuery плагин??

2 ответа 2

7

.block {
  width: 200px;
  height: 200px;
  margin: 5px auto;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
}
.block-text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 100%;
  left: 0;
  transition: 0.3s;
}
.block:hover .block-text {
  bottom: 50%;
  transform: translateY(50%);
}
<div class="block">
  <div class="block-text">
    <p>Как сделать чтобы при наведении на блок, текст красиво спускался сверху вниз? Как-нибудь через CSS можно? Или же лучше использовать JQuery плагин??</p>
  </div>
</div>

1

.main {
  position: relative;
  width: 100px;
  height: 100px;
  background: silver;
  text-align: center;
}
.text {
  position: absolute;
  top: -100px;
  transition: 0.5s
}
.main:hover .text {
  top: 0;
}
<div class="main">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

1
  • Свойство top лучше не анимировать. 20 дек 2016 в 12:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.