Use Anchor title instead of image title - php

Question

If I have an image in an anchor, how can I make the title of the anchor appear, and not that of the image element?
I know I could remove the title attribute with javascript, but I'm hoping there is a simpler solution.
For example
<a title="Anchor Title"><img title="Image Title" /></a>
If you hover over the link, it will display "Image Title".
What I've Tried
With CSS, I thought maybe I could change the z-indexes to push the anchor to the front, or maybe I could display the anchor as a block and give it the width and height of the image. This did not work. See JSFiddle here.
I was hoping to find a solution with CSS or maybe HTML.
The reason I want to do this is is that I'm working with Wordpress, spitting out posts and thumbnails. I want the thumbnails to link to a certain page, and I want to have a universal title for the link, but it is taking the title from the individual thumbnails. Here's the Wordpress/PHP code:
<a href="<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>

Answer 1

Pass an empty string in the title attribute in the $attr array in the thumbnail:
<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>

Answer 2

This offers a general solution, disregarding WordPress. CSS prevents the title to show up.
HTML:
<a title="Anchor Title">
<img title="Image Title" src="http://codepen.io/images/logo.png" />
</a>
With CSS:
a {
display: inline-block;
}
img {
pointer-events: none;
}
Result
See CodePen example

Answer 3

Just put a transparent <span> over the image, with transparent background and desired title attribute.
Markup
<a href="#">
<img title="Image Title" />
<span title="Div Title"></span>
</a>​
CSS
img { width:50px;height:50px;background:blue; }
a, img { position:absolute; }
a { z-index:4;display:block;width:50px;height:50px; }
img { z-index:2; }
​span{
top:0;
left:0;
position:absolute;
width:50px;
height:50px;
display:block;
z-index:100;
background-color:transparent;
}​
I just forked your fiddle, works in Chrome at least.

Answer 4

I think removing the img title attribute is the simplest solution of all.

Answer 5

http://jsfiddle.net/hnmuj/
CSS:
#foo {
position:relative;
display:block;
}
#foo span {
position:absolute;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
display:block;
}
​
HTML:
<a title="Anchor Title" id="foo">
<span></span>
<img title="Image Title" />
</a>​