Можно по разному оформить картинки у себя на сайте чтобы скрасить их однообразность, зачастую изображения не вписываются в дизайн сайта, и приходиться им придавать специальную цветовую гамму, например черно-белую, это позволяет визуально разгрузить сайт. Но что, если черно-белые картинки это слишком скучно, и веб-мастер хочет привлечь внимание пользователей к изображению. В данном уроке мы рассмотрим как сделать интересный эффект с помощью класса hover. Идея заключается в том, что изображение, по умолчанию, черно-белое..

 

..а при наведении курсора, набирает цветовую гамму довольно таки интересный эффект. Для достижения такого эффекта мы будем использовать технику CSS3. Этого бы вполне хватило для браузеров, которые поддерживают прозрачность и переходы. Для того, чтобы сделать эффект универсальным, мы будем использовать jQuery. Но для начала мы разберемся с разметкой HTML:

Для плавного перехода нам понадобятся два изображения в различной цветовой гамме, которые будут плавно изменяться:

Теперь рассмотрим позиционирование изображений, с помощью CSS3, элемент #wrap будет содержать размер изображения 865 px = 845px (размер изображения) + 2x10px (размер рамки)
IMG элемент позиционируется относительно, цветной версии ( .onhover ), при этом задается 0 прозрачности и абсолютной позиции.
При ротации изображений, можно заметить небольшую тень, вокруг изображений, это будет достигаться с помощью класса ( span.shadow ):
Теперь добавим эффект масштабирования и вращения для исходящего изображения, для этого мы просто добавим свойство преобразования:
Теперь рассмотрим jQuery, а именно его применение для кроссбраузерности, и поддержки переходов в IE:
Вот и все. Данный прием будет отлично смотреться на сайте, особенно если его использовать для миниатюр. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.