Select Page

Create an overlay caption with CSS

How to create a caption overlay for your elements

Today we will be diving into some nice css hover effects for image captions. Bet you’ve seen these effects on several other websites before. The idea is to have an image overlay which darkens the image and reveals the caption when hovering the element.

This is what we will be creating:

 

Demo

 

Now let’s get started with the basic html setup and our body content.
Note:
Since we will be using HTML5 elements we will include the html5shiv to make our code compatible with older browsers.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>CSS hover Overlay</title>
	<meta name="author" content="Jaime Butler" />
	
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

<head>
<body>
<div class="container">
	<figure>
		<img src="Zytglogge.jpg" />
		<figcaption>
			<h1>My hover Overlay</h1>
			<a href="#" class="button">Learn More</a>
		</figcaption>
	</figure>
</div>
</body>
</html>

In our body we have placed a “container” div containing a figure element. This figure element holds our image and a figcation with some text and a link. Our link has a class of “button” which we will use for styling later.

We are using the HTML5 figure element.

Pleas note: the figure element only makes sense if the units within the figure are associated with or are essential for the main content of the page, but it’s position on the page can change without affecting the meaning of the main content. For more information on the figure element go and check out the article on html5 Doctor.

Now we have our setup we can start styling the elements to achieve our hover effect.

Let’s start with the main div, the “container” and our h1 tag within the ficaption.

.container {
	width: 400px;
	margin: 0 auto;
}

h1 {
	font-size: 1.5em;
	padding-bottom: 10px;
	text-transform: uppercase;
}

For those of you familiar with css this is pretty straightforward. We are setting the width of our “container” to 400px and aligning it to the center of the body.
Next we define the font-size of our h1 tag, give it some room (padding) to the bottom and use “text-transform: uppercase” transforming all letters to (guess what) uppercase.

Next up is our figure:

.container figure {
margin: 0;
	position: relative;
	background-color: #000;
}

.container figure img {
	max-width: 100%;
	display: block;
	position: relative;
}

Since we are going to position our figcation absolute inside the figure, we are going set the position of our figure to relative. We also set a background-color of “black” (#000), this will be our overlay color when hovering.

For the “img” tag inside the figure we set an maximum width of 100%.

Now lets get our figcation in place.

.container figcaption {
	position: absolute;
	top: 25%;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	color: #fff;
}

As mentioned we are setting the position absolute to our figure (for more info on positioning check this article).
We will give the figcation some space by setting “top” to 25%.

The key here is to set the “opacity” propertie to a value of 0. This way the figcation won’t be visible in normal state.

Now we are going to define our hover states.

.container figure:hover img {
	opacity: 0.25;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	transition: all .8s ease;
}

.container figure:hover  figcaption{
	opacity: 1;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	transition: all .8s ease;
}

First when we hover the figure, we are going to lower the opacity of our image to 0.25. When this happens our set background-color (black) shimmers thru and gives the image an dark overlay.

As we want our figcation to appear when hovering our figure we are going to set the figcation to opacity 1. Both hover-states are going to happen with a smooth ease transition.

Note:
The transition only works as intended in browsers that support that CSS properties.

To finish things of we will style our link to give it a button like look.

/* Button */
a.button {
	color: #fff;
	text-decoration: none;
	border: 1px solid #fff;
	padding: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

a.button:hover {
	background-color: #fff;
	color: #666666;
}

That’s it. We have our caption overlay when hovering the image.

You can now play around with the styles to get the caption overlay that fits your needs.

If you have any questions or remarks, feel free to drop me a line or leave a comment below.

Jaime

Submit a Comment

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

11 + six =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest