Display Caption Text On Image Hover in WordPress

In this tutorial, i’ll show you how to use pure CSS code to:

• Display an icon in place of your caption text
• Display your caption text when the icon is hovered

Note: The solution in this post only works on images embedded in a post and not on featured images. You can take the HTML from the text editor after inserting an image and display it anywhere using a text widget or custom function.

WordPress generates 2 classes for captions which are displayed below your images by default:

.wp-caption { The main div your caption is wrapped in }

.wp-caption-text { A class for the caption text }

The following CSS code simply re-positions your caption text over your image and hides it until you hover over the image.

Demo Video

You could also use jQuery to hide and display text captions on images which we’ll cover in another tutorial.

Related Code Snippets

• Add Caption To Featured Image on Single Post in Genesis
• Archive Templates To Display Featured Image Caption For Each Property Listing
• Caption Text Over Image For Each WordPress Gallery Item