Animated Image Caption Hover Effects with CSS3 and HTML5

In this tutorial written by MARY LOU we're going to create stunning and modern Image Caption Hover Effects using CSS3 and HTML5 figure & figcaption elements. 

Features:

• Built only with CSS3 and HTML5
• Touch Devices supported
• Stunning effects using CSS3 3D Transforms
• Easy to customize via CSS and Html
• 7 different effects to fit your requirements
• Check the demo page for more details

See also:

• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Sticky Image Captions with jQuery
• Amazing Thumbnail Zoom Plugin With Sliding Captions
• Animated jQuery Image Caption On Hover Plugin - Capty
• jQuery Animated Image Cation with HTML5 Figcaption

How to use it:

1. Insert a image using HTML5 figure & figcaption tags

<figure> <img src="images/1.png" alt="img01">
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span> <a href="#">Take a look</a> </figcaption>
</figure>

2. The CSS

figcaption {
height: 100%;
width: 100%;
opacity: 0;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.no-touch figure:hover figcaption, figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translate(15px, 15px);
-moz-transform: translate(15px, 15px);
-ms-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
figcaption h3 {
margin-top: 70px;
}
figcaption span {
display: block;
}
figcaption a {
margin-top: 30px;
}

3. Include toucheffects.js for touch devices

<script src="js/toucheffects.js"></script>

---

This awesome jQuery plugin is developed by codrops. For more Advanced Usages, please check the demo page or visit the official website.