Last Updated:

Drop-down captions for images

On sites, basically, you can find the output of captions for images that contain various information about the material. Often these so-called hints are very boring and do not attract the user's eyes to the necessary information under the image, but this, albeit not so big problem, can be solved very simply with the help of a small jQuery plugin. The Drop Caption plugin takes the contents of the title attribute of the image and makes a caption out of it, which appears only when you hover the mouse cursor over the image.

If you disable JavaScript, the signature will be displayed by standard browser tools. First, we'll look at how to connect this plugin and then how to call it, first we'll place the code below between the head tags:



But what are the advantages of this plugin?

  • It occupies only 3 KB
  • Backward compatibility
  • Very easy to configure
  • Uses CSS styles
  • One plugin is used for all images

You can also connect the jQuery Easing plugin and use its various effects to display captions. You can display captions for any number of images on the page.

The options are used when calling the script:

The last step is to look at CSS styles. You can style labels using the .caption class: