24
Сен
2021

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

Всем доброго времени суток. Как сделать чтобы параграф был спрятан за 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>

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

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

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