• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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.

Register for full access

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

  • Caption Text Over Image For Each WordPress Gallery Item

Reader Interactions

Comments

  1. wrumwrum says

    November 15, 2014 at 7:11 pm

    thank you Brad, very nice technique. It is useful to add, that if you need full with caption background you have to add: right:0 after left:0.
    I have a question:
    do you know any method to make caption background clickable?
    now it’s like:

    [caption]<a href="#" rel="nofollow"></a>[caption]
    I am thinking about
    <a href="#" rel="nofollow">[caption][caption]</a>

    I’ve tried to do it manually but without success

    Log in to Reply
    • Brad Dalton says

      November 15, 2014 at 8:46 pm

      Support provided for members only.

      Log in to Reply
  2. Lisa says

    October 23, 2014 at 5:44 pm

    Thanks for tutorial! where though do u put our text for caption?

    Log in to Reply
    • Brad Dalton says

      October 23, 2014 at 5:56 pm

      In the image > caption field when inserting/uploading the image.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems