• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Блики на изображения при наведение на CSS (Создание блики на изображения при наведение клика HTML + CSS)
Блики на изображения при наведение на CSS
Kosten
Дата: Пятница, 2020-02-21, 21:19 | Сообщение 1
Онлайн
Администраторы
Сообщений:26128
Награды: 60


Давайте рассмотрим один оригинальный эффект, который заключается в том, что при наведении курсора на изображение появляется красивый блик, что проходит по всей картинке. Плюс в том, что этот трюк создан на чистом CSS, где нам не нужно подключать различные библиотеки или задействовать JavaScript.



HTML

Код
<a href="http://zornet.ru/" class="kartina_slayda">
    <img src="http://zornet.ru/_fr/63/5877487.jpg" alt="ZorNet.Ru — сайт для вебмастера">
    <div class="casnud-melosab">
        <i class="podsag"></i>
    </div>
</a>

CSS

Код
.kartina_slayda {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

.kartina_slayda img {
    width: 200px;
    height: 280px;
    object-fit: cover;
    filter: grayscale(100%) contrast(120%);
    box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
    display: block;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: -10px;
}

.kartina_slayda:hover img {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}

.kartina_slayda .casnud-melosab {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: -10px;
}

.kartina_slayda .podsag {
    display: block;
    position: absolute;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, .2);
    top: 0;
    filter: blur(5px);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.kartina_slayda:hover .podsag {
    transform: rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.kartina_slayda:hover img,
.kartina_slayda:hover .casnud-melosab {
    margin-top: 0;
}

На этом вся установка!

Видео обзор:



Демонстрация
Прикрепления: 3499612.jpg(21.1 Kb) · blesk.zip(2.7 Kb)
Страна: (RU)
YaVi
Дата: Пятница, 2020-02-21, 21:52 | Сообщение 2
Оффлайн
Vip
Сообщений:34
Награды: 3


Цитата Kosten ()
Давайте рассмотрим один оригинальный эффект, который заключается в том, что при наведении курсора на изображение появляется красивый блик, что проходит по всей картинке. Плюс в том, что этот трюк создан на чистом CSS, где нам не нужно подключать различные библиотеки или задействовать JavaScript.


Не плохо смотрится)


uFive.Ru - Лучшее для web мастеров
Страна: (RU)
Kosten
Дата: Пятница, 2020-02-21, 22:57 | Сообщение 3
Онлайн
Администраторы
Сообщений:26128
Награды: 60


YaVi, здесь нужно понимать, что если цветную картинку ставить, то она будет черно белой, это сделано для большей визуализации.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Блики на изображения при наведение на CSS (Создание блики на изображения при наведение клика HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: