Как сделать анимацию выскальзывания параграфа сверху-вниз в новостном блоке?

Question

Всем доброго времени суток. Как сделать чтобы параграф был спрятан за h2 и img (был невидим), но при наведении на новостной блок он "выскальзывал" сверху-вниз и стал видимым как на примере:

.newsItem {
  width: 400px;
  height: 500px;
  cursor: pointer;
}

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

<div class="newsItem">
  <img src="https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75">
  <h2>Первый кот-директор в мире!</h2>
  <p class="hide">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora dolor pariatur, voluptate odit ullam a voluptatum veritatis nostrum aut, eveniet et minus aperiam esse culpa provident. Dolores, ad, iusto?
  </p>
  <hr>
</div>

Answer 1

$(`.clickable`).on(`click`, function() {
  $(this).next().slideDown();
});

.newsItem {
  width: 400px;
  height: 500px;
  cursor: pointer;
}

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.clickable {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsItem">
  <img src="https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75">
  <h2 class="clickable">Первый кот-директор в мире!</h2>
  <p style="display:none">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora dolor pariatur, voluptate odit ullam a voluptatum veritatis nostrum aut, eveniet et minus aperiam esse culpa provident. Dolores, ad, iusto?
  </p>
  <hr>
</div>

Answer 2

Задаёте параграфу плавность измнения: transition: 1s
Скрываете его: opacity: 0
Переносите наверх: transform: translateY(-200%)
Добавляете стили для класса visible, благодаря чему параграф становится видимым и возвращается на место.
По наведению на новостной блок добавляете параграфу класс visible (здесь придётся использовать js/jquery, потому что обычный hover не позволит сохранить состояние - как только Вы уберёте курсор от картинки, параграф уедет обратно и исчезнет)

$('.newsItem').on('mouseover', function(){
    $('.hide').addClass('visible');
})

.newsItem {
  width: 400px;
  height: 500px;
  cursor: pointer;
}
img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.hide {
  transform: translateY(-200%);
  opacity: 0;
  transition: 1s;
}
.hide.visible {
  transform: translateY(0);
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsItem">
  <img src="https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75">
  <h2>Первый кот-директор в мире!</h2>
  <p class="hide">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora dolor pariatur, voluptate odit ullam a voluptatum veritatis nostrum aut, eveniet et minus aperiam esse culpa provident. Dolores, ad, iusto?
  </p>
  <hr>
</div>

БЛОГ НА HUSL

Как сделать анимацию выскальзывания параграфа сверху-вниз в новостном блоке?

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