CSS — затемненные картинки при наведении осветляются

css hideimg opacity - CSS — затемненные картинки при наведении осветляются

Пять строк CSS кода без использования JavaScript и прочих языков. Затемненная картинка при наведении курсора становится светлой.

Полезное решение, когда необходимо спрятать счетчики веб-аналитики или сделать их менее заметными.

HTML разметка

<div class="box-image">
    <figure>
        <img src="#" alt="">
    </figure>
</div>

CSS. По умолчанию затемнены

/*Светление картинок при наведении*/
.box-image a img,
.box-image img{
    opacity:0.3;
}   
.box-image a img:hover,
.box-image img:hover{
    opacity:1.0;
}

CSS. По умолчанию не затемнены

/*Затемнение картинок при наведении*/
.box-image a img,
.box-image img{
    opacity:1.0;
}   
.box-image a img:hover,
.box-image img:hover{
    opacity:0.3;
}

Как вы уже могли догадаться, за тень отвечает стиль opacity, который накладывает на объект не тень, а прозрачность. Значение параметров колеблется от 0 — полная прозрачность до 1 — 100% непрозрачности.

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

  1. @Дмитрий пишет:
    07.11.2016 в 02:38

    Лестницы в Киеве
    http://master-wood.com.ua/lestnicy-Kiev.html

    Грузоперевозки Житомир
    http://avto-spectehnika.com.ua/Gruzoperevozki/Gruzoperevozki-Zhitomir.html

    Грузоперевозки Киев
    http://avto-spectehnika.com.ua/Gruzoperevozki/Gruzoperevozki-Kiev.html

    Межкомнатные двери в Киеве
    http://master-wood.com.ua/mezhkomnatnye-dveri-v-Kieve.html

    Лестницы Киев
    http://stohod.com.ua/lestniccy-Kiev.html

    Создание сайтов в Киеве
    http://vipsite-zhitomir.com.ua/kiev.php

    Адвокат в Житомире
    http://vash-urist.com.ua/advokat-v-Zhitomire.html

    http://o93181qx.bget.ru

    Спасибки. Долго искала.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *