vk
Назад»/Все статьи»

Анимированная карточка с помощью CSS

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

Для создания фото-карточки вам надо перекопировать следующие часы кодов:

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

            
CSS:
                .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 же, можете менять шрифты, текст и размеры картинки по своему усмотрению.