ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

       filter:alpha(opacity=40);

          

       /* CSS3 для нормальних браузерів */

       opacity:0.4;

          

   }

 

Суть вищеописаної магії в тому, щоб затемнити картинки, що знаходяться в тегах ul li a img.

Результат затемнення

Тепер зробимо так, щоб при навереднні на таб мишки, він ставав яскравим. Для цього використовуємо псевдоклас hover

   ul li a:hover img{

              

       /* Приблуда, для експлорера */

       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

       filter:alpha(opacity=100);

            

       /* CSS3 для нормальних браузерів */

       opacity:1.0;

   } 

Якщо зараз понатискати на таби – буде відбуватися перехід до картинки по якорю. Залишився останній штрих. Потрібно приховати картинки, які не відображаються для цього налаштуємо блок “images”. В налаштуваннях також вказуємо розташування блоку з картинками та його розмір. Він має бути такого ж розміру як і основний малюнок:

   #images{

       width:500px;

       height:500px;

       overflow:hidden; 

       float:left;

   }

Параметром overflow:hidden; приховуємо всі картинки, окрім тої на яку ми перейшли по якорю.