Text Link Is Hiding My Image Link

I have a image where text/link is overlayed on top. My problem is that sometimes the text in the foreground will hide the link in the image in the background. I assume this is beca

Solution 1:

Try this, i.e. put your tag inside : http://jsfiddle.net/WHpMr/3/

HTML:

<divclass="ad"><spanclass="link middle right"><ahref="#text"class="inline-link">my text link abcdefg<br>meow<br>meow<br>meow</a></span><ahref="#background"><imgsrc="http://www.placekitten.com/320/200"></a></div>

CSS:

.ad {
    position: relative;
    height: 200px;
    width: 320px;
}
.link {
    position: absolute;
    padding: 20px;
    pointer-events: none;
}
.inline-link {
    pointer-events: all;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }

Solution 2:

You are correct in thinking that. The element will create a block containing the content. You could use the Map Element if you are hell bent on doing that.

Solution 3:

If you make each line its own link, that will minimize the problem. If you really want to go all out, you can make each word its own link. But you're getting into stuff that's easier to do with some JS automation instead of manually in the HTML.

EDIT: Here's an attempt at a vanilla JS solution that works for your simple example, at least:

http://jsfiddle.net/aLN2d/35/