Show caption on hover

Basic caption shown on hover using HTML, jQuery and CSS

by Brian Steck

HTML

<img src="https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bmVyZHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="image" />
<span class="caption">Mmm... Computers</span>

CSS

.caption {
  display: none;
  position: relative;
  top: -2em;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.5em;
}
.show {
  display: block;
}

JavaScript

jQuery(document).ready(function($) {
  $(".image").hover(function() {
      $( this )
        .next('.caption').toggleClass('show');
    })
});