Эффект функций onMouseover и onMouseout на CSS

Автор: Илья Остапенко /

Доброе время суток дорогие друзья! В последнее время, я все больше и больше стал увлекаться CSS. Сегодняшний пост не обошел этой участи. На одном из буржуйских сайтов, нашел очень офигенный трюк.  Он позволяет создать эффект функций onMouseover и onMouseout на CSS. Ну не буду много болтать и перейду к делу.

Эффект функций onMouseover и onMouseout на CSSДля данного трюка нам понадобятся две картинки. Вы можете использовать картинки из моего примера, а можете создать свои. Мои картинки можете скачать во вложении.  Теперь давайте напишем простую страничку, которая будет отображать две картинки рядом.

Теперь нужно добавить код стиля который собственно и будет создавать эффект анимации. Он будет выглядеть так.

 

Весь фокус данного трюка заключается в том, что одна картинка скрывается за другой. Когда курсор мыши наводиться на картинку верхняя исчезает и появляется нижняя. После того, как курсор уходит с картинки, плавно появляется верхняя. Все достаточно просто. Если вы знаете хотя бы основы CSS, то можете изменить код стиля под себя. Кстати вот вам пример странички с таким кодом.

http://www.workwebsite.ru/example/fotofade/ff.php

Надеюсь, пост вам понравился и принесет пользу, а если принесет, то я жду от вас лайки и ретвиты =) На десерт приготовил для вас видео  котов после наркоза. Желаю вам удачи дорогие друзья, до новых постов =)

 

Комментарии к записи

Оставить комментарий

Это не спам.