Note that there are some explanatory texts on larger screens.

plurals
  1. POImage (with a background image) as link
    primarykey
    data
    text
    <p>I'm trying to get a link to a page working correctly when an image is clicked. On this <a href="http://jsfiddle.net/cvh2013/KEzT3/" rel="nofollow noreferrer">jsFiddle</a> you'll see three circular images. When the mouse is hovered over any of them, a background shadow image is rendered. When you click on the 'law firms' image, a short HTML page with some text should be displayed. What happens is that the link to the law firm text is rendered not as the image itself, but as a '>' character - see screenshot below. </p> <p>Can anyone guide me how to make the image act as the link, please? Also ensuring that the background image continues to be centred over the law firms image when the mouse is hovered over it.</p> <p>CSS:</p> <pre><code>.center {text-align: center;} #sfimages {padding:15px;} #sfimages:hover { background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r); background-repeat: no-repeat; background-position:center; } </code></pre> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;table style="width: 100%"&gt; &lt;tr&gt; &lt;td class="center"&gt; &lt;div id="sfimages"&gt; &lt;a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"&gt; &gt; &lt;object type="image/svg+xml" data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr"&gt; &lt;img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" /&gt; &lt;/object&gt; &lt;/a&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="center"&gt; &lt;div id="sfimages"&gt; &lt;object type="image/svg+xml" data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux"&gt; &lt;img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" /&gt; &lt;/object&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="center"&gt; &lt;div id="sfimages"&gt; &lt;object type="image/svg+xml" data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx"&gt; &lt;img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" /&gt; &lt;/object&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p></p> <p><img src="https://i.stack.imgur.com/VoFEp.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload