hover image example

hover image example

HTML

<div>
    <img class="image" src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
    <span class="description hidden">image 1 description</span>
</div>

CSS

.image {
    height: 200px;
    width: 400px;
}

.description {
    display: block;
    color: white;
    background-color: #000;   
    margin-top: -4px;
    padding: 10px;
    width: 380px;
    opacity: 0.8;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

JavaScript

$(document).ready(function () {
    $( ".image" ).hover(
      function() {
          $(this).next('span').toggleClass('visible');
      }, function() {
          $(this).next('span').toggleClass('visible');
      }
    );
});