Animated Image Caption Hover Effects with CSS3 and HTML5
File Size: | 70 KB |
---|---|
Views Total: | 32114 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.