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


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

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

Вот пример реализации, достаточно интересного и необычного эффекта без помощи javascript, а исключительно на CSS.

Вот так выглядит наш CSS код:
<style type="text/css"><!--#banners a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);}#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>


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


JavaScript CSS прозрачность картинки
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 26
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация