Карточка товара с выезжающим текстом 2025: hover-эффект

В данном уроке напишем карточку товара с выезжающим блоком текста и нестандартным изначальным видом. Подобные карточки могут стать настоящей изюминкой сайта, а их запоминаемость - одна из причин роста продаж.

Для создания карточки кнопки перекопируйте следующие части кодов:

                <div class="eCard">
                    <div class="img">
                        <a href="#">
                            <img src="https://www.oweb-solutions.ru/images/site/week7_1100.jpg" alt="">
                        </a>
                    </div>
                    <div class="eCard_content">
                        <h3>
                            Название карточки
                        </h3>
                        <p>
                            Текст. Здесь может напечатан абсолютно любой текст, по вашему усмотрению. 
                            Однако, есть небольшой нюанс. Размер текста не долже превышать 220 знаков. 
                            У декоративных карточек свои капризы :)
                        </p>
                    </div>
                </div>

            

                .eCard {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    max-width: 280px;
                    height: 250px;
                    box-sizing: border-box;
                    font-family: Helvetica, sans-serif;
                    background-color: #fff;
                    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5);
                    padding: 20px 10px 40px;
                    margin-top: 60px;
                    transition: 0.5s ease-in-out;
                    z-index: 1;
                }
        
                .eCard .img {
                    position: relative;
                    top: -60px;
                    left: 0;
                    width: 260px;
                    height: 250px;
                    transition: 0.5s ease-in-out;
                    z-index: 1;
                }
        
                .eCard .img img {
                    max-width: 260px;
                    height: 250px;
                    object-fit: cover;
                    object-position: center;
                    border-radius: 4px;
                }
        
                .eCard .img a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                }
        
                .eCard_content {
                    position: relative;
                    width: 260px;
                    text-align: center;
                    visibility: hidden;
                    opacity: 0;
                    padding: 10px;
                    transition: all 0.3s ease-in-out;
                    transition-delay: 0.1s;
                    overflow: hidden;
                }
        
                .eCard h3 {
                    font-size: 20px;
                    line-height: 1.3;
                    color: #111;
                    margin: 0 0 10px;
                }
        
                .eCard p {
                    font-size: 16px;
                    line-height: 1.3;
                    color: #8f8f8f;
                    margin: 0;
                }
        
                .eCard:hover {
                    height: 500px;
                }
        
                .eCard:hover .img {
                    top: 0;
                }
        
                .eCard:hover .eCard_content {
                    visibility: visible;
                    opacity: 1;
                    margin-top: 0;
                }
            

После копирования вышеупомянутых кусков кода у вас должна появиться такая карточка:

Название карточки

Текст. Здесь может напечатан абсолютно любой текст по вашему усмотрению. Однако есть небольшой нюанс. Размер текста не должен превышать 220 знаков. У декоративных карточек свои капризы :)

Наша карточка товара готова. Для ее корректной работы не рекомендуем вносить изменения в структуру html (исключение - название карточки, текст и картинка, их менять можно) и CSS кода.