Show captions on image hover using CSS

In this article we will show captions on image hover using CSS. It a technique that improves the user interfaces and makes your website design more professional.
Submitted by Abhishek Pathak, on October 16, 2017

Everyday new design trends are coming out. Most of them are built using just pure CSS and no JavaScript. Using CSS wisely and hacking out using the syntax, we can build out brilliant stuff that improves the user experience.

Take an example of image captions. Image captions are widely used to tell user about what image it. It also helps if image doesn't load, so users can read caption and they will get to know what all image is about. But we don't need them every time. We can hide it until user hovers the image, so they don't take up space on screen and out content looks neat.

We are going to write down the code first, and then we will break down the code.

First of all, let's define the markup

Code - HTML

<div class="box">
	<img src="image.png" alt="My Image">
	<p class="caption">A beautiful image</p>
</div>

A simple div wrapper class for our image and caption elements. Inside it we have an image and a paragraph with class caption.

Now, time for some CSS magic.

Code - CSS

div {
  position: relative;
}
div img {
  display: block;
  width: 350px;
  margin: auto;
}
p.caption {
  position: relative;
  opacity: 0;
  transition: opacity .3s;
}

div img:hover + p.caption {
  opacity: 1;
}

First we change the position of div to relative, because we want to style our child elements relative to parent. Then we target the img and assign some properties to it. The display block will make sure our images don't render inline. Then we apply margin shorthand property to assign auto margin. This will center our image element.

Next up with our paragraph, we give it position relative, so elements down it don't keep moving. We also give opacity property to 0 to make the element transparent, and apply transition property with value opacity .3s. This will give a smooth transition within 0.3 seconds for opacity.

Finally, we select the img tag and apply :hover psuedo class and target p.caption using sibling element selector +, which selects elements next to it. In this simply we change the value of opacity to 1. Now whenever we hover over image, it's sibling, that is the caption paragraph opacity will transition to 1, and it will be visible. This will give the webpage a sense of iteraction and improve the user experience.

Here is a demo,

DEMO

HTML with CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS Hover Image DEMO</title>
		<style id="jsbin-css">
			body {
				text-align: center;
			}
			div {
				position: relative;
			}
			div img {
				display: block;
				width: 350px;
				height: auto;
				margin: 0 auto;
			}
			p.caption {
				position: relative;
				opacity: 0;
				text-align: center;
				transition: opacity .3s;
				color: #f56;
			}

			div img:hover + p {
				opacity: 1;
			}
		</style>
	</head>
	<body>
	<h1>Hover your mouse over image</h1>
		<div class="block">
			<img src="https://cloud.google.com/blog/big-data/2016/12/images/148114735559140/image-classification-1.png" alt="">
			<p class="caption">Sunflower in the garden</p>
			<p>An example to show the demo of hovering mouse over the image.</p>
		</div>
	</body>
</html>

Output

CSS Tutorial & Examples »

Change image shapes with CSS

Creating Gradients with CSS3

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples