Search code examples
htmlimagehovertitlealt

Get rid of alt text for html on hover


I'm trying to create a page of images and I've manged to make them fancy by adding captions that only appear when each image is hovered over. But now I'm having problems with duplicate captions as it seems that a white caption box also appears wherever my mouse is when the images are hovered over. I think someone said this is the alt text or something but I'm not sure. In any case, I want to remove it so I don't have it interfering with my other fancier hover caption. I can't attach an image but hopefully you understand my problem.

The code I used is below:

<style type="text/css">
  a.hovertext {
    position: relative;
    width: 320px;
    text-decoration: none !important;
text-align: center;
  }
 a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0em 0px;
    width: 320px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
      }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }
</style>
<div class="noborderdv" style="clear: both; text-align: left;">
<table align="center" border="0" cellpadding="5" style="width: 500px;">
<tbody>
<tr>
<td align="center" valign="center"><a class="hovertext" href="https://www.blogger.com/blogger.g?blogID=6870619294109194114#" title="Sandwich"><img alt="" border="0" src="http://3.bp.blogspot.com/-nHv87zBke7I/U5fwCcRoe2I/AAAAAAAAAgs/BupH3BsNoj4/s1600/DSCN6778.JPG" height="258" width="320" /></a>
</td>
<td align="center" valign="center"><a class="hovertext" href="https://www.blogger.com/blogger.g?blogID=6870619294109194114#" title="Bitte Sandwich"><img alt="" border="0" src="http://1.bp.blogspot.com/-PFpW_AZbbFg/U5fwIhjwXZI/AAAAAAAAAhM/OMQZpy8wx2E/s1600/DSCN6866c.JPG" height="240" width="320" /></a>
</td>
</tr>
</tbody></table>
</div>

How can I get rid of the white box caption as this is particularly annoying when I have longer captions.


Solution

  • Replace this:

    <style type="text/css">
      a.hovertext:after { content: attr(title); }
    </style>
    <a title="Sandwitch">...</a>
    

    with this:

    <style type="text/css">
      a.hovertext:after { content: attr(data-title); }
    </style>
    <a data-title="Sandwitch">...</a>
    

    HTML5 data-* attributes will allow you to insert additional data into the markup without triggering the default user-agent caption.