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

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


Очень забавное решение буквально из пяти строк кода исключительно на сss, которое накладывает затемнение на выбранные нами картинки. Ничего сложного, никаких стороних файлов или jquery кодов! Очень полезная штука, когда необходимо скрыть счетчики посетителей или какие то рекламные блоки!

1. По умолчанию картинки затемнены
В файл стилей css добавляем код:
/*Светление картинок при наведении*/
#hideimg a img, #hideimg img {   opacity:0.3;}   
#hideimg a img:hover, #hideimg img:hover {   opacity:1.0;}


2. По умолчанию картинки не затемнены
В этом случае тень будет накладываться при наведении курсора!
/*Затемнение картинок при наведении*/
#hideimg a img, #hideimg img {   opacity:1.0;    }  
#hideimg a img:hover, #hideimg img:hover {opacity:0.3; }


3. Нужные картинки оборачиваем кодом:
<div id="#hideimg ">
<img src="imgurl"/>
</div>


Как вы уже могли догадаться, за тень отвечает стиль: opacity, который накладывает на объект не тень, а прозрачность. Значение параметров колеблется от 0 - полная прозрачность до 1 - 100% непрозрачности.
Понравилась статья "CSS - затемненные картинки при наведении осветляются" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 1 •  Просмотров: 12739   Дата: 29-мар-2014, 15:46

Похожие статьи

Комментарии


Гости
Лестницы в Киеве
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

Спасибки. Долго искала.
(7 ноября 2016 02:38) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика