Управление прозрачностью картинок через CSS

Если кто-то не знает как с помощью CSS можно управлять прозрачностью картинок веб страниц, то эта статья для вас.
Преимущество этого способа в том, что он кроссбраузерный и будет работать при запрещенном исполнении JavaScript.
Основная проблема эффекта прозрачности – официально его ввели в CSS3, но всеми любимый Internet Explorer как всегда не понимает его. Вот и приходится с бубнами танцевать.
И так…Если вы хотите сделать картинку полупрозрачной вам нужно в CSS написать следующее:

img {
  opacity: 0.5;
}

Но такая запись не будет работать в ИЕ и старых версиях популярных браузеров. Чтобы оживить этот эффект и в них, нужно дописать несколько строчек:

img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;    /* Mozilla 1.6 и ниже */
  -khtml-opacity: 0.5;  /* Konqueror 3.1, Safari 1.1 */
  opacity: 0.5;         /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
  filter: alpha(opacity=50); /* IE 5.5+*/
}

Возможно, вам нужно, чтобы эта картинка была полупрозрачной, но при наведении на неё курсора мыши становилась не прозрачной… Помещаем эту картинку в тег <a href=»#»> </a> , а в CSS пишем:

a:link img,
a:active img,
a:visited img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
	filter: alpha(opacity=50);
}
a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  filter: alpha(opacity=100);
  }