В данном уроке напишем карточку товара, с выезжающим блоком текста и не стандартным изначальным видом. Подобные карточки могут стать настоящей изюминкой вашего сайта и их запоминаемость - одна из причин роста ваших продаж.
Для создания карточки кнопки вам надо перекопировать следующие часи кодов:
<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 кода.