Skip to content

Display Image Captions only on Hover

Learn how to optimize images in WordPress by displaying image captions only on hovering over the image.

Display Image Captions only on Hover

Image captions are probably the most neglected part for an attached image in WordPress. Most of the blogs I follow either do not use captions or style them to display underneath the image. Though it merely have any impact on ranking the image in search engines (alt and title tags do) but, if used, captions can be useful to increase keyword density as well as optimize the content for a better search engine visibility.

Image captions can be styled in many ways, but my favorite is to display them only on hover. This effect can be achieved by adding a few lines of CSS code (no JavaScript required). Just add this piece of code in Appearance > Customize > Additional CSS. (if your theme offers adding custom CSS codes via options panel or customize setting, you can place it there too).

Here is a standard WordPress logo with image caption displaying on hover.

Image Captions
Image Captions
figure.wp-caption {
	position: relative;
	overflow: hidden;
}
figure.wp-caption .wp-caption-text {
	position: absolute;
	height: 35px;
	line-height: 35px;  //Should be same as height
	bottom: -35px;  //Should be same as height, only negative
	background: rgba(0,0,0,.8);
	left: 0;
	right: 0;
	color: #fff;
	padding: 0;
	transition: bottom 250ms;
	text-align: center;
}
figure.wp-caption:hover .wp-caption-text {
	bottom: 0;
}

That’s it. Please let me know if this code works for you via comment below.

About Abhik()

Website: www.pixellcode.com

I am a WordPress fanatic and a full time blogger. I love to talk about WordPress and Online Marketing. I also work as a freelancer and have a bunch of awesome people as my client.

Your Comment

Your email address will not be published. Required fields are marked *

Copyright © 2016 - 2018 PixellCode. All Rights Reserved