Как сделать ссылку по верх картинки?

Question

[Slava]

Нужно по верх картинки добавить еще несколько ссылок, как . Заголовок добавляется нормально, но как /a>только добавляю ссылку - картинка увеличивается в размерах. Не могу понять в чем причина. Хелп!

Код

P.S. Картинки обернуты в ссылки для работы плагина просмотра картинок.

Comments

[aloky]

код в студию

Answer 1

[Slava]

Засунул каждую ссылку в отдельный див и то что должно всплывать при наведении положил еще в один див рядом с этой ссылкой и задал диву (соседнему с ссылкой) position: absolute

Answer 2

[Павел Радьков]

Ссылка внутри ссылки — невалидный код. Браузер пытается его исправить разметки самостоятельно и ломает внешний вид.

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

Comments

[Slava]

Скажите, пожалуйста, возможно есть схожий пример. На словах пока не могу понять как сделать. Спасибо!

Answer 3

[Алексей]

А тег map в этом не подойдет ?

Comments

[Slava]

Я так понимаю map для карт используется...

[Алексей]

Slava, map режет картинку на области которые являются ссылками, насколько я помню к ним также можно добавлять css свойства отдельно https://www.w3schools.com/tags/tag_map.asp

[Slava]

Алексей, может и можно таким путем пойти, но мне важно чтобы каждая картинка была обернута в тег "а" (для работы плагина) и при наведении всплывало окно с ссылками.

[Алексей]

Slava, ну а просто отдельный див с абсолютным позиционированием поверх картинки не сканает ? Чтобы при hover на картинку он показывался

[Slava]

Алексей, пробовал разные варианты, не выходит. Возможно что-то не так делаю, поэтому и написал но форум))