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. --> </figure> </li> <!-. Read more about the figure element in this great HTML5 Doctor article: The figure & figcaption elements.. The aim is to keep the effects subtle and provide inspiration for many different variations. --> </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). Note that for effect 4 we will have an additional division wrapping . 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. Please note: this only works as intended in browsers that support the respective CSS properties. Let’s get started. yet stylish hover effects for image captions.png" alt="img01"> <figcaption> <h3>Camera</h3> <span>Jacob Cummings</span> <a href="">Take a look</a> </figcaption> </figure> </li> <li> <figure> <!-. This is the default structure for all the grid examples.. author and a link button. For some of the effects we will use 3D transforms. The images used in the demos are Dribbble shots by talented Jacob Cummings. 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.

left: 0. position: relative. list-style: none. Let’s reset the margins of the figure elements and set the position to relative. max-width: 1300px. we’ll define the styles for the grid and the list items that will serve as the containers of our figures: . First. 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: . That’s how we will define the effect styles for each single example. but you will find them in the files. By default it will be positioned in the top left corner.grid { padding: 20px 20px 100px 20px. The CSS Note that the CSS will not contain any vendor prefixes. margin: 0. background: #2c3f52. } will be positioned absolutely. padding: 20px.grid figure img { max-width: 100%. margin: 0 auto.grid li { display: inline-block. } .grid figcaption { position: absolute. so example 1 will have “cs-style-1″. . text-align: center. We won’t define any width or height here as we will do so in all the individual styles: . example 2 will have “csstyle-2″ and so on. text-align: left. But first let’s define the common styles for all effects. } padding: 20px. Ourfigcaption will be positioned absolutely. color: #ed4e6e. so we need to make sure it will do so inside of the figure: . 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. The common styles for all the figures is the following. width: 440px.grid figure { margin: 0.the image. top: 0. The figcaption display: block. The class for each single effect will be added to the list.

background: #ed4e6e. } . } . We will replace the hover for the touch and add a class that will trigger the effects when we have detected touch. color: #fff.grid { width: 100%. But be aware that this is not 100% bulletproof for testing if you are on a touch device as pointed out here. In the end of our CSS we will also add a media query for smaller screens: @media screen and (max-width: 31. but this will give you the freedom to change it easily into something like “made by” or “Designer: ” or similar.grid li { 300px. padding: 5px 10px. We only want the hover to trigger when we don’t detect touch. padding: 0.And finally. } We’ll add the “by” for the span that contains the author name using the pseudo-class :before. Effect 1 . by doing something like this.5em) { 100px 10px. though.grid figcaption h3 { margin: 0. color: #fff. let’s define some styles for the text elements and the link: . display: inline-block. Be careful not to remove meaning from your HTML. } . Note that we will use Modernizr to detect touch.grid figcaption a { text-align: center. border-radius: 2px.grid figcaption span:before { content: 'by '. So you will always see another rule for that in addition to the :hover. padding: 10px 10px min-width: And now let’s start by doing some nice effects. Of course you can add that in the HTML. } } .

} Additionally.3s.3s.cs-hover figcaption { opacity: 1. We want the caption to fade in and move a bit to the right and down. For that we first need to set the width and height of the figcaption and set the initial opacity to 0: . we will position the text elements: . transform: translate(15px. transition: transform 0. opacity: 0. You don’t have to use that if you don’t mind the little glitch.cs-style-1 figure:hover figcaption. creating the illusion of a 3D layer that comes out of the image. backface-visibility: hidden. opacity 0. 15px). } 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.cs-style-1 figcaption { height: 100%.cs-style-1 figure. textalign: center. width: 100%.Let’s start with a very simple effect. On hover (or on touch) we will set the opacity to 1 and translate the figcaption a bit: . .no-touch .

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