Ниже расположены 4 фото кружек с животными. Наведите на каждое из изображений - и рядом возникнет увеличенная версия картинки.
Обратите внимание на то, что при уведении мыши с изображения на пустое пространство между картинками или за пределами блока, увеличенное изображение пропадает с экрана.
Код примера вы найдете на сайте html-plus.in.ua.
В JS коде используется прием делегирования событий, когда функция-обработчик события записывается для родительского элемента, но само событие обрабатывается для вложенных, или дочерних, элементов.
Родительский элемент для маленьких изображений имеет id="picContainer", а div, в котором мы видим увеличенное изображение - id="picHolder"
Изображения оптимизированы с помощью сайта tinypng.com