Плавное увеличение затенённой картинки при наведении курсора мыши с разными эффектами осветления

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Демо-пример

Мне кажется, эффект достойный внимания, но, как иногда бывает, есть маленькая неприятность. Дело в том, что во всех современных браузерах он работает корректно, кроме Internet Explorer. Но, этот «замечательный» браузер всегда выделяется своей индивидуальностью в линейке себе подобных.


Исходники (407 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


Получив архив с материалом, распакуйте его в отдельную папку на компьютере. В папке imagesize_3 должны находиться три папки: css, images и js, а также файл index.html.

Последний откройте в браузере и проверьте, как работает эффект.

Подготовьте изображения с условием, чтобы ширина была 400 пикселов, иначе нужно будет делать изменения в CSS. Вставьте изображения в папку images (на компьютере). Для упрощения процесса дайте вашим изображениям аналогичные названия тем, которые указаны в примере, чтобы дополнительно не вносить их в код.

Если разбираетесь в CSS, можете внести изменения в файлах папки css, а папку js трогать не нужно.

Папку imagesize_3 с папками и файлом внутри закачайте в корневую директорию сайта.

Пройдите по ссылке //your_site.ru/imagesize_3/index.html (your_site.ru - ваш сайт), чтобы просмотреть, что у вас получилось.

В вышеизложенном я привёл один из возможных способов реализации эффекта. Вы вправе сделать всё по-другому, например, разместить HTML-файл в «корне», прописав другие пути к папкам css, images и js, или разместить изображения в папке images вашего сайта.

На этом всё. До новых уроков. Всегда с вами, L.M.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика