Like what you see?
Hide

Blog
Website design

Cross browser animated captions using HTML5 figcaption


Cross browser animated captions using HTML5 figcaption

See the Demo!

Figure and Figcaption

In the past web developers had to use div's with classes or ids to create images with captions. With HTML5 we can semantically markup our images and captions using the figure and figcaption elements. The problem of course is making these elements both beautiful, interactive, and cross browser compliant. Here I will show you how to create one quick example of a sliding caption effect using these new elements.

The HTML markup

Our HTML markup is very simple and straight forward. We place the figcaption and img elements inside the figure element. I have also linked to the amazing jQuery library which will we use later for the animations.



  
    
  
  
    
Write your image description here
Write your image caption here!

Now the CSS

The most important part about styling HTML5 elements so that they work in older browsers is to give them the correct display property. For the figure and figcaption elements we will use dislpay:block; You will also notice that I specify an rgba color for the background of the caption. This will make it slightly transparent (a nice little touch) but since older browsers will not understand it I also specify flat black for them to fall back to.

figure {
     display:block;
     width:400px;
     height:600px;
     position:relative;
     overflow:hidden;
}

figcaption {
     display:block;
     width:380px;
     height:40px;
     padding:10px;
     position:absolute;
     top:540px;
     left:0;
     color:#FFFFFF;
     font:13px/20px Arial, sans-serif;
     background:#000000;
     background:rgba(0,0,0,.5);
} 

The javascript

For the first part of our javascript we must create the HTML5 elements for older browsers. Otherwise they could completely ignore them and in turn our styling will not effect them.

document.createElement('figure');
document.createElement('figcaption'); - See more at: http://www.coalmarch.com/blog/cross-browser-animated-captions-using-html5-figcaption#sthash.MVOedHPd.dpuf

Some animation with jQuery

We should now have an image with a nice caption laying over it. While this is great we of course want to take it a step further. I will be using the jQuery javascript library to help us create this. For more information on the code below you can go to the documentation on the official jQuery website.

$(document).ready(function(){
  $('figcaption').css('top','600px');
  $('figure').hover(function(){
  $(this).find('figcaption').stop().animate({'top':'540px'}, 200, function(){});
},function(){
  $(this).find('figcaption').stop().animate({'top':'600px'}, 200, function(){});
});
});

See it in action!

Click here to see the finished product! I know I didn't go into a lot of detail in this post but you can find lots of specific information on the code to make this work by viewing the source code on the example. Also, feel free to leave any comments of feedback below. Thanks!

See the Demo!

View our work
Get answers Get a quote
We dont biteWe dont bite