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>
Pass an empty string in the
title
attribute in the$attr
array in the thumbnail:This offers a general solution, disregarding WordPress. CSS prevents the title to show up.
HTML:
With CSS:
Result
See CodePen example
Just put a transparent
<span>
over the image, with transparent background and desired title attribute.Markup
CSS
I just forked your fiddle, works in Chrome at least.
I think removing the img title attribute is the simplest solution of all.
http://jsfiddle.net/hnmuj/
CSS:
}
â
HTML: