You are currently viewing Show Caption on Image Hover

Show Caption on Image Hover

I was moving a client website built with WordPress and Beaver Builder over to just WordPress, because who needs an extra page builder like Beaver Builder? One feature that Beaver Builder had that looked cool was showing a caption on image hover, so I researched how to do that in plain WordPress without adding yet another plugin. Here’s the effect:

default image
Default Image
hover image
Hover Image

To make this happen I needed to do just two things:

  1. On each image that I want the hover effect, add an additional CSS class: hover-title
  2. In the Appearance> Customize add extra CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
figure {
    position:relative;
}
.hover-title .wp-element-caption {
    position:absolute;
    bottom:-20px;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align:center;
}
.hover-title:hover .wp-element-caption {
    opacity: 1;
}

To see the hover effect in action, just move your cursor over this image:

default image
Try hovering

In WordPress there can be more than one way to achieve a new effect, so if you have questions, then give me a call and I’ll let you know what options to choose from.

Leave a Reply