Как затемнить фон картинки через css, чтобы при наведении на нее мышкой

она осветлялась:

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

Отличный способ поддержать дизайн сайта и сделать затемнение картинок.

Например, сделать счетчик затемненным, т.е. полупрозрачным, а также применить этот код со всеми возможными баннерами и картинками.

Сделать затемнение картинки, счетчика или баннера на сайте очень просто. Делается это следующим образом.

Заключаем код счетчика в div-блок и присваиваем ему любое название, например «temnota»:

<div id="temno">здесь затемняемый счетчик или баннер </div>

В самом низу страницы style.css вставляем следующее:

.temno{font-size: 13px; /* размер шрифта */
font-weight: bold;     /* стиль текста: жирный */

padding:0px;              /* отступ от границ */
border:0px solid #CCC;   /* толщина и цвет рамки */}

Для чего нужен этот блок: font-size - задает размер шрифта, если мы будем писать что-то в блок с картинками. font-weight — определяет стиль текста,

в данном случае blod — жирный (можно так же поставить normal, bolder, lighter). padding — определяет отступ от границы, то есть расстояние от вашего текста

или картинки до граница (рамки), если конечно вы будете ее делать указав border — который укажет толщину рамки (если оставить ноль, то рамки не будет)

и цвет (html код, ставится после знака #. Коды цветов можно посмотреть, набрав в поиске Яндекса «Палитра цветов Яндекс»).

Чуть ниже предыдущего кода вставляем:

.temno a img{border: none;opacity:0.5; /* непрозрачность: 50% */
}

Этот блок предназначен для отображения картинка, такой, как мы будем ее видеть до наведения на нее мышкой. То есть определяем степень затемнения (или непрозрачность).

Здесь важна команда opacity — она определяет затемнение. Значение можно ставить от 0.0 до 1.0.

В примере стоит значение 0.5, то есть прозрачность составляет 50%.

Вставляем третий и последний блок:

.temno a:hover img{border: none;opacity:1.0; /* прозрачность: 100% */
}

Этот блок будет определять какой станет наша картинка, когда мы наведем на нее мышкой (значение a:hover). У меня указано значение opacity:1.0,

что означает — картинка будет становится полностью видимой, без затемнения.

В итоге мы получаем такой блок в файле style.css, все настройки можно поменять на свои.

.temno{font-size: 13px;/* размер шрифта */
font-weight: bold;    /* стиль текста: жирный */

padding:0px;       /* отступ от границ */
border:0px solid #CCC;   /* толщина и цвет рамки */

}.temno a img{border: none;opacity:0.5; /* непрозрачность: 50% */
}.temno a:hover img{border: none;opacity:1.0;/* прозрачность: 100% */
}

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

Заходим туда, где у вас расположен код счетчика (ну или любой другой картинки). Находим код счетчика.

Теперь внимание, необходимо в начале кода поставить такое <div class=»temno»>

А в конце поставить </div>

Получаем вот такое:

<div class=»temno»>

<!—LiveInternet counter—><script type=»text/javascript»><!—

document.write(«<a href=’http://www.liveinternet.ru/click’ «+

«target=_blank><img src=’//counter.yadro.ru/hit?t14.7;r»+

escape(document.referrer)+((typeof(screen)==»undefined»)?»":

«;s»+screen.width+»*»+screen.height+»*»+(screen.colorDepth?

screen.colorDepth:screen.pixelDepth))+»;u»+escape(document.URL)+

«;»+Math.random()+

«‘ alt=» title=’LiveInternet: показано число просмотров за 24″+

» часа, посетителей за 24 часа и за сегодня’ «+

«border=’0′ width=’88′ height=’31′><\/a>»)

//—></script><!—/LiveInternet—>

</div>

Еще отмечаю, что при написании команды div class= после равно коряво отображается кавычка, как вы понимаете первая кавычка открывает,а вторая закрывает.

Теперь можете проверить, ваш счетчик затемнен, при наведении на него он осветляется.

Отображение на странице можно полностью отключить с помощью CSS, например, <div style="display: none;">код счетчиков</div>.

Счетать от этого они не перестанут, но посетители счетчиков не увидят вообще.

За это вас могут исключить из каталогов, систем статистики, чьи кнопки вы установили. Если заметят, конечно же. Заметят ли? Не думаю…

Еще вариант затемнения счетчика на сайте:

Данный код для прозрачности картинки вписываем в Style.css аналогично предыдущим вариантам:

.counter a img {
opacity:0.4;
-moz-opacity:0.4;
filter:alpha (opacity=40);
}
.counter a:hover img {
opacity:1.0;
-moz-opacity:1.0;
filter:alpha (opacity=100);
}

В тегах opacity и -moz-opacity прозрачность регулируется значениями от 0.0 до 1.0, в filter от 0 до 100.

Создадим такой див: