Hover-эффект карточек с выезжающим контентом Сегодня разберем, как создать стильную карточку с контентом, который проявляется при наведении. Главная фишка здесь — игра с позиционированием и трансформацией. HTML: <div class="card"> <div class="img-box"><img src="..."></div> <div class="content"> <h2>Leafs</h2> <p>Lorem ipsum...</p> <a href="#">Read More</a> </div> </div> Карточка содержит блок с изображением и блок с контентом. Базовые стили карточки: .card { position: relative; width: 350px; height: 300px; transition: 0.5s; } .card:hover { height: 400px; } ■ position: relative нужен, чтобы абсолютно позиционировать картинку и контент внутри карточки. ■ При ховере карточка увеличивается на 100px, освобождая место под текст. Блок с изображением: .img-box { position: absolute; top: 20px; width: 300px; height: 220px; overflow: hidden; transition: 0.5s; } .card:hover .img-box { top: -100px; scale: 0.75; } ■ Картинка вынесена в position: absolute, чтобы она могла выходить за границы карточки. ■ При наведении - картинка уезжает вверх за границы карточки и уменьшается до 75% размера. Контент карточки: .content { position: absolute; top: 252px; overflow: hidden; transition: 0.5s; } .card:hover .content { top: 130px; height: 250px; } Контент изначально обрезан overflow: hidden. При наведении поднимается вверх и раскрывается на полную высоту. Весь эффект получается за счет абсолютного позиционирования блоков внутри карточки, изменения top и scale при наведении и плавный transition: 0.5s для анимации. Простой, но эффектный способ оживить карточки на сайте) Результат можно посмотреть здесь.