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.
Click here to get full access to all tutorials & coding support for 1 month
Demo Video
You could also use jQuery to hide and display text captions on images which we’ll cover in another tutorial.