Добавим переход

^{Добавим переход}

Наконец, наложим переход на свойство opacity, который сгладит изменение свойства и добавит немного приятной глазу анимации, дополняющей эффект.

Добавим знакомые строки transition, на этот раз объявляя переход исключительно для свойства opacity. Сделаем его быстрым (0,2 секунды) и выставим временную функцию ease-in-out.

#footer-logos a img {

opacity: 0.25;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */

filter: alpha(opacity = 25); /* IE 5–7 hack */

-webkit-transition: opacity 0.2s ease-in-out;

-moz-transition: opacity 0.2s ease-in-out;

-o-transition: opacity 0.2s ease-in-out;

transition: opacity 0.2s ease-in-out;

}

#footer-logos a: hover img,

#footer-logos a: focus img {

opacity: 0.6;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */

filter: alpha(opacity = 60); /* IE 5–7 hack */

}

С использованием перехода мы получили простой метод использования opacity для создания гибкого взаимодействия в состоянии hover на основе лишь одного набора изображений.