Tutorials

CSS On-Hover Image Captions

Tags: Beginner

I was browsing through some gallery style sites and saw some inspirational techniques that I wanted to replicate with my own version and style. This is an add-on to my previous articles “5 Ways to Spice up Your Images with CSS ” and “CSS Vertical Navigation with Teaser“, a little combination of both techniques.

The HTML

This is a combination of the image caption and the teaser technique, I nested the caption of our image within a hyperlink. What I want to do, is hide the caption until the user hovers over the image.

To make this technique user friendly, I decided to add a “Learn More” to make it more obvious that the teaser is available on the image.

<div class="imgteaser">
<a href="#">
	<img src="Daim1.jpg" alt="Daim Graffiti" />
	<span class="more">&raquo; Learn More</span>
	<span class="desc">
		<strong>DAIM 2002</strong>
		Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
	</span>
</a>
</div>

Keep in mind, to be XHTML valid, a hyperlink (an Inline tag) can’t contain block level tags. Here is a quick reference.

The CSS

First I will style and establish the parent div and its hover properties.

.imgteaser {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.imgteaser a {
	text-decoration: none;
	float: left;
}
.imgteaser a:hover {
	cursor: pointer;
}

From here, we will add our double border effect on our image

.imgteaser a img {
	float: left;
	margin: 0;
	border: none;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
}

Then we move on to adding the “Learn More” and then styling the caption.

.imgteaser a .more {
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 1.2em;
	color: #fff;
	background: #000;
	padding: 5px 10px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
	display: block;
	font-size: 1.2em;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 11px;
	left: 11px;
	padding: 10px;
	margin: 0;
	width: 566px;
	border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
	display: block;
	margin-bottom: 5px;
	font-size:1.5em;
}

At default, we want the “Learn More” to show, and when hovered, we want to hide that and show our caption. For some reason IE6 was not hiding the “Learn More” when using display: none; , but using visibility:hidden; seemed to do the trick.

.imgteaser a .desc {	display: none; }
.imgteaser a:hover .more { visibility: hidden;}

Conclusion

This is a useful technique when running image galleries and such, where you have short captions explaining the details of the image. One site that uses this approach pretty well is www.designflavr.com. I like how they show the number of comments when hovering over each image.