Caption Hover EffectsA tutorial on how to create some subtle and modern

caption hover effects.

View demo Download source

Today we want to show you how to create some simple, yet

stylish hover effects for image captions. The idea is to have a

grid of figures and apply a hover effect to the items which will

reveal a caption with the title, author and a link button. For

some of the effects we will use 3D transforms. The aim is to

keep the effects subtle and provide inspiration for many

different variations.

Please note: this only works as intended in browsers

that support the respective CSS properties.

The images used in the demos are Dribbble shots by

talented Jacob Cummings.

Let’s get started.

The Markup

The structure of our grid and the figures will be made of an

unordered list and each item will contain a figure element.

The figure will contain an image and a figcaption with some text

elements and a link:<ul class="grid cs-style-1"> <li> <figure> <img src="images/1.png" alt="img01"> <figcaption>

<h3>Camera</h3> <span>Jacob Cummings</span> <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a> </figcaption> </figure> </li> <li> <figure>

<!-- ... --> </figure> </li> <!-- ... --> </ul>

Please note that using a figure only makes sense if it does not

constitute the main content itself but if it’s typically

referenced from the main flow of the document and if we can

move it away (to an appendix for example). Read more about

the figure element in this great HTML5 Doctor article: The

figure & figcaption elements.

This is the default structure for all the grid examples. Note

that for effect 4 we will have an additional division wrapping

the image.

The class for each single effect will be added to the list; so

example 1 will have “cs-style-1″, example 2 will have “cs-

style-2″ and so on. That’s how we will define the effect styles

for each single example.

But first let’s define the common styles for all effects.

The CSS

Note that the CSS will not contain any vendor prefixes, but

you will find them in the files.

The common styles for all the figures is the following. First,

we’ll define the styles for the grid and the list items that will

serve as the containers of our figures:.grid { padding: 20px 20px 100px 20px; max-width: 1300px;

margin: 0 auto; list-style: none; text-align: center; } .grid li { display: inline-block; width: 440px;

margin: 0; padding: 20px; text-align: left; position: relative; }

Making the list items display as inline-blocks will allow us to

center them be applying a centerd text-align to the parent.

Let’s reset the margins of the figure elements and set the

position to relative. Ourfigcaption will be positioned absolutely,

so we need to make sure it will do so inside of thefigure:.grid figure { margin: 0; position: relative; }

The image will have a maximum width of 100% which will

come in handy when we define a media query to resize the list

items:.grid figure img { max-width: 100%; display: block;

position: relative; }

The figcaption will be positioned absolutely. By default it will be

positioned in the top left corner. We won’t define any width or

height here as we will do so in all the individual styles:.grid figcaption { position: absolute; top: 0; left: 0;

padding: 20px; background: #2c3f52; color: #ed4e6e; }

And finally, let’s define some styles for the text elements and

the link:.grid figcaption h3 { margin: 0; padding: 0; color: #fff; } .grid figcaption span:before { content: 'by '; } .grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px;

display: inline-block; background: #ed4e6e; color: #fff; }

We’ll add the “by” for the span that contains the author name

using the pseudo-class :before. Of course you can add that in

the HTML, but this will give you the freedom to change it

easily into something like “made by” or “Designer: ” or

similar. Be careful not to remove meaning from your HTML,

though, by doing something like this.

In the end of our CSS we will also add a media query for

smaller screens:@media screen and (max-width: 31.5em) { .grid {

padding: 10px 10px 100px 10px; } .grid li { width: 100%; min-width: 300px; } }

And now let’s start by doing some nice effects.

Note that we will use Modernizr to detect touch. But be aware

that this is not 100% bulletproof for testing if you are on a

touch device as pointed out here. We will replace the hover

for the touch and add a class that will trigger the effects when

we have detected touch. So you will always see another rule

for that in addition to the :hover. We only want the hover to

trigger when we don’t detect touch.

Effect 1

Let’s start with a very simple effect. We want the caption to

fade in and move a bit to the right and down, creating the

illusion of a 3D layer that comes out of the image.

For that we first need to set the width and height of

the figcaption and set the initial opacity to 0:.cs-style-1 figcaption { height: 100%; width: 100%; opacity: 0;

text-align: center; backface-visibility: hidden; transition: transform 0.3s, opacity 0.3s; }

We also add a transition and set the backface-visibility to

hidden to avoid a jump in the text rendering in the end of the

transition. You don’t have to use that if you don’t mind the

little glitch.

On hover (or on touch) we will set the opacity to 1 and

translate the figcaption a bit:.no-touch .cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption { opacity: 1; transform: translate(15px, 15px); }

Additionally, we will position the text elements:

.cs-style-1 figcaption h3 { margin-top: 70px; } .cs-style-1 figcaption span { display: block; } .cs-style-1 figcaption a { margin-top: 30px; }