Caption Hover Effects

Caption Hover Effects
A 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.
Lets 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
The
figure
will contain an image and a
figure
figcaption
element.
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 its 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 csstyle-2 and so on. Thats how we will define the effect styles
for each single example.
But first lets 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,
well 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.
Lets 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 the figure:
.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%;
The
figcaption
display: block;
position: relative; }
will be positioned absolutely. By default it will be
positioned in the top left corner. We wont define any width or

height here as we will do so in all the individual styles:
.grid figcaption { position: absolute;
top: 0; left: 0;
background: #2c3f52;
color: #ed4e6e; }
padding: 20px;
And finally, lets 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; }
Well 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) {
100px 10px;
}
.grid li {
300px; } }
.grid {
width: 100%;
padding: 10px 10px

min-width:
And now lets 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 dont detect touch.
Effect 1
Lets 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;
textalign: 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 dont have to use that if you dont 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; }

Caption Hover Effects

Uploaded by

Copyright:

Available Formats

Caption Hover Effects

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Caption Hover Effects

Uploaded by

Copyright:

Available Formats

Caption Hover Effects

A tutorial on how to create some subtle and modern

View demo Download source

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

will contain an image and a

with some text

elements and a link:

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

elements and set the

position to relative. Ourfigcaption will be positioned absolutely,

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

will be positioned absolutely. By default it will be

positioned in the top left corner. We wont define any width or

padding: 10px 10px

And now lets start by doing some nice effects.

Lets start with a very simple effect. We want the caption to

figcaption and set the initial opacity to 0:

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

Additionally, we will position the text elements:

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

You might also like