Image Title Hovered Using CSS

<style type="text/css">
  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 20px;
    width: 460px;
    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>

<p><a class="hovertext" data-title="The title attribute of the link appears over the image on hover"><img src="photo/000022.jpg" width="500" height="309" border="0" alt=""></a></p>