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:


To make this happen I needed to do just two things:
- On each image that I want the hover effect, add an additional CSS class: hover-title
- 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:

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.