Тут нет никакого плагина, это просто такая форма разметки, что-то похожее происходит и с многоуровневыми меню.
Для реализации потребуется определенная форма разметки контента и несколько строк стилей. В приведенном примере они очевидны, если нет, готов пояснить.
Нарядность, например плавное появление/затухание и прочее можно сделать с помощью js или css3.
Автор
kud
(@kud)
Буду признателен за пояснение.
Заранее спасибо.
Итак, разметка — <a class="popup" href="#">Ссылку<span><img src="primer.jpg" alt="primer" /></span></a>. Здесь ссылка в которой находится текст «Ссылку» и span которым обернуто изображение. Все предельно просто, но вполне можно и span убрать.
Основная идея в том, что span скрыт в обычном состоянии так:
.popup span {
position: absolute;
visibility: hidden;
}
И появляется он при наведении указателя мыши на родителя, т.е. на ссылку, реализовано так:
.popup:hover span {
visibility: visible;
top: 0;
left: 80px;
}
Чтобы появляющаяся картинка располагалась рядом со ссылкой у ссылки устанавливается position: relative;, а у вложенного span — position: absolute;.
