artslab header

В одном из комментариев на сайте спрашивали о там как создать эффект_ вроде того что на картинке выше. То есть чтобы при наведении на картинку, ее прозрачность становилась 100%-ной, а на неактивной картинке поменьше (50%), чтобы она выглядела потусклее. Далее следует небольшое описание, как это сделать.

  1. Добавляем в style.css следующий код:
a.opacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;}

a.opacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

}
  1. Подключаем style.css к главной странице index.html/php. Добавляем между <head> и </head>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  1. Вставляем на главной(index.hml):
<a href="#" class="opacity">

<img src="logo.jpg" alt="Image" />

</a>

На этом и все, пример можно скачать отсюда.

Опубликовано

Похожие записи

Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo