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

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

Owebs
8 августа 2022
Просмотры 46
Рейтинг
Время чтения Время чтения: 6 минут

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

Company-logo

any descr text

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

После копирования вышеупомянутых кусков кода у вас должна появиться такая карточка:

Company-logo

any descr text

Наша фотокарточка готова. Можете указывать в атрибуте "src" картинки путь к своему изображению и нужный вам URL-адрес в атрибуте "href" тега <a>. Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы фотокарточки не рекомендуем вносить изменения в структуру html кода. В CSS же можете менять шрифты, текст и размеры картинки по своему усмотрению.

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

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

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

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

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

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

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

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

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

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

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

>