Эффект прозрачности для изображений

Возможно Вы когда либо видели, что счетчики на сайте сделаны как бы более прозрачными или тусклыми а при наведении на них курсором приобретают начальные свойства. Мне всегда это нравилось, но я не задумывался а как это делается…

Сегодня я приведу пример реализации данного, достаточно интересного и необычного эффекта без помощи JavaScript а исключительно на CSS.

Вот так выглядит наш CSS код

#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
-->
</style>

Далее необходимые нам изображения заключаем в соответствующий DIV. К примеру вот так…

<div id="banners">

<a href="#"><img src="cnt.gif" width="88" height="31" border="0"></a>

<a href="#"><img src="cycounter.gif" width="88" height="31" border="0"></a>

<a href="#"><img src="hit.gif" width="88" height="31" border="0"></a>

<a href="#"><img src="img.gif" width="88" height="31" border="0"</a>

</div>

Выглядеть это будет таким образом:

Куда мы можем применить данный эффект… опять же таким образом мы можем увести акцент внимания с определенных объектов, тех же счетчиков, или можем сделать наши изображения скажем в фото галерее на сайте полупрозрачными. Возможно применить этот эффект с созданию меню сайта…в общем фантазия в Ваших руках.

25-07-08 09:07:06

Sleep Walker - 29-05-09 07:05:33

изменить первый параметр opacity=40 - т.е. прозрачность 40% от первоначальной... Варьируйте его до получения нужного результата - я поставила у себя на - внизу баннерки почти незаметны.
Удачи!

EgorVish - 16-01-09 17:01:19

Как регулировать параметры ?

Написать комментарий

ВНИМАНИЕ: Все поля необходимо заполнить