Довольно часто на сайтах встречаются карточки с изображением услуги (фото-карточки), при клике на которые, вы переходите в разделы этих услуг. Такие карточки более привлекательны для пользователей и в то же время, украшают ваш сайт внешней. Сегодня мы сделаем подобную карточку, но более продвинутого типа. Цель: написать код для фото-карточки, при нваедении на которую, будет появляться описание данной карточки. И конечно же, мы должны учесть, чтобы при клике на карточку нас перекидывало по нужному 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 же, можете менять шрифты, текст и размеры картинки по своему усмотрению.