Animated Image Caption Hover Effects with CSS3 and HTML5

File Size: 70 KB
Views Total: 32159
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.