Animated Image Caption Hover Effects with CSS3 and HTML5

Animated Image Caption Hover Effects with CSS3 and HTML5
File Size: 70 KB
Views Total:
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:

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.