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

Я подробно опишу порядок действий для сайтов на CMS WordPress, однако работать эта функция, при грамотном подходе, будет на сайтах любого типа.

Так выглядит код самой ссылки:

<a class="imagetip" href="ВАША_ССЫЛКА" target="_blank">"АНКОР ССЫЛКИ"<span><img class="alignnone" src="ССЫЛКА_НА_НЕОБХОДИМОЕ ИЗОБРАЖЕНИЕ" /></span></a>

Разбирать подробно этот код не имеет особого смысла, поскольку все и так очевидно. Параметр target="_blank" говорит о том, что ссылка будет открываться в новом окне, используйте его на свое усмотрение.
Теперь нам необходимо создать css класс imagetip. Для этого в панели администрирования вашего сайта переходим на вкладку "Внешний вид" - "Редактор", находим файл style.css, который, скорее всего, откроется в редакторе сразу по умолчанию, и в самый конец вставляем следующий код:

.imagetip span{
    border-radius: 5px 5px 5px 5px;
    visibility: hidden;
    position: absolute;
    left: 270px;
    background: #fff;
    box-shadow: -2px 2px 10px -1px #333; 
    border-radius: 5px;
    width: 20%;
    z-index: 9999;
}
.imagetip:hover span{
visibility: visible;
}

После этого, можете проверить его работоспособность и откорректировать визуализацию в соответствии со своими предпочтениями, изменяя параметры кода.

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