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

 

Для начала мы подключим фреймвор, который будет отвечать за эффекты при фокусировании, данный строчку скрипта размещаем между тегами head:

Далее мы рассмотрим саму структуру HTML, В данной размете кода все очень просто. У нас есть обертка с классом spotlightWrapper. Внутри находится неупорядоченный список, который содержит элементы списка с анкорами и изображениями.

Следующий этап-стили CSS. В стилях также ничего экстраординарного.

Класс active будет принадлежать изображению при наведении на него мышкой. И не забудьте, чтобы Ваши значения left и top имели одинаковые значения с border-width, но со знаком «-«.

Завершающим этапом будет jQuery. Код ниже может показаться Вам сложным, но на самом деле это не так:

Вместо $(document).ready мы используем $(window).load для того, чтобы все изображения успели загрузки перед запуском jQuery. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.