Изображение (с фоновым изображением) в качестве ссылки

Я пытаюсь получить ссылку на страницу, которая работает правильно при щелчке по изображению. На этом jsFiddle вы увидите три круглых изображения. Когда мышь зависает над любым из них, создается фоновое изображение тени. Когда вы нажимаете на изображение «юридических фирм», должна отображаться короткая HTML-страница с некоторым текстом. Что происходит, так это то, что ссылка на текст юридической фирмы отображается не как изображение, а как символ «>» – см. Снимок экрана ниже.

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

CSS:

.center {text-align: center;} #sfimages {padding:15px;} #sfimages:hover { background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r); background-repeat: no-repeat; background-position:center; } 

HTML:

  

введите описание изображения здесь

Был запасной символ: пожалуйста, проверьте следующий код (в комментарии есть ссылка на полный код):

 

Извините за то, что уделил время, для меня это был напряженный день, и у меня было достаточно времени, чтобы вернуться к вашему вопросу. Вот что я рекомендую. Похоже, код, с которым вы работаете, производится из inkscape? Когда он запускает исходный код, это гайки, особенно внутри области объекта. Но не бойтесь, если хотите ссылки. Просто сделайте следующие небольшие корректировки, и вы должны быть на своем пути со ссылками!

CSS:

 .center { text-align: center; } #sfimages { padding:15px; position:relative; width:380px; height:273px; } #sfimages:hover { background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r); background-repeat: no-repeat; background-position:center; } #ext-site { display:block; width:380px; height:273px; position:absolute; z-index:9999; } 

HTML:

 

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

Проверьте мою новую скрипку

Строка 6:

  > 

Снимите дополнительный зажимной кронштейн.