Карточка товара с выезжающим блоком

Карточка товара с выезжающим блоком

Owebs
25 октября 2022
Просмотры 93
Рейтинг
Время чтения Время чтения: 5 минут

Оглавление
Развернуть Свернуть

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

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

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

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

HTML:
                <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>

            
CSS:
                .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 кода.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

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

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен