Как сделать прозрачные изображения при наведении курсора

Как сделать прозрачные изображения при наведении курсора

Эффект прозрачности изображений, который исчезает при наведении курсора - один из самых распространенных в сети. Принцип работы очень простой: все заключается в небольшой части кода, который добавляется к CSS стилям в шаблоне блога.
А при наведении курсора эффект исчезает, подобно тому, как изменяется курсор при наведении на ссылки ;)
Преимущество подобного стиля состоит в том, что Вы можете добавить эффект только тем изображениям, которые Вы сами выберите!


Чтобы сделать это следуйте следующим инструкциям:
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:

</head>
и сразу перед этим кодом добавляем:

<!--LINK-OPACITY-STARTS-->
<style type="text/css">


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }


</style>
<!--LINK-OPACITY-STOPS-http://beliber-da.blogspot.com-->

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

Код обычного изображения выглядит примерно так:

<a href="http://pomoshnikbloggera.blogspot.ru/" target="_blank" alt="RSS Подписка"><img src="http://pomoshnikbloggera.blogspot.ru//rss.png" /></a>

Чтобы добавит прозрачный эффект просто добавьте код выделенный жирным:

<a class="linkopacity" href="http://pomoshnikbloggera.blogspot.ru/" target="_blank" alt="RSS Подписка"><img src="http://pomoshnikbloggera.blogspot.ru//rss.png" /></a>