Довольно часто на сайтах встречаются карточки с изображением услуги (фотокарточки), при клике на которые вы переходите в соответствующие разделы. Они более привлекательны для пользователей. Сегодня мы сделаем подобную карточку, но более продвинутого типа. Цель: написать код для фотокарточки, при наведении на которую будет появляться ее описание. Также мы должны учесть, чтобы при клике на карточку нас перекидывало по нужному URL-адресу.
Для создания фотокарточки перекопируйте следующие части кодов:
<div class="imageCard"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/20190502_Newhaven_to_Dieppe_Ferry_3.jpg/1200px-20190502_Newhaven_to_Dieppe_Ferry_3.jpg" alt="" class="imageCard_img"> <a href="#" class="imageCard_item-opacity"> <div class="imageCard_item-text"> <h2>Company-logo</h2> <b>any descr text</b> </div> </a> </div>
.imageCard { position: relative; width: 300px; height: 400px; position: relative; background-color: rgb(231, 5, 5); z-index: 1; } .imageCard_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; } .imageCard_item-opacity { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); transform: translate(-100%); opacity: 0; transition: all .2s ease-in-out; } .imageCard_item-text { position: absolute; top: 45%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; } .imageCard_item-text h2 { color: #fff; font-size: 31px; transform: translateX(-100px); transition: all .2s ease-in-out .2s; opacity: 0; margin: 0 0 20px; } .imageCard_item-text b { display: block; color: rgb(252, 206, 4); font-size: 23px; letter-spacing: 2px; transform: translateX(-100px); transition: all .2s ease-in-out .3s; opacity: 0; } .imageCard:hover .imageCard_item-opacity { transform: translateX(0); opacity: 1; } .imageCard_item-opacity:hover .imageCard_item-text h2, .imageCard_item-opacity:hover .imageCard_item-text b { transform: translateX(0); opacity: 1; }
После копирования вышеупомянутых кусков кода у вас должна появиться такая карточка:
Наша фотокарточка готова. Можете указывать в атрибуте "src" картинки путь к своему изображению и нужный вам URL-адрес в атрибуте "href" тега <a>. Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы фотокарточки не рекомендуем вносить изменения в структуру html кода. В CSS же можете менять шрифты, текст и размеры картинки по своему усмотрению.
Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.
В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей
Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.
Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.
Сегодня напишем с вами анимацию карточки-конверта.
*Условия акции: получить приз можно после заключения договора и реализации заказанной услуги.