Author: | larrygeams |
---|---|
Views Total: | 15,286 views |
Official Page: | Go to website |
Last Update: | October 4, 2014 |
License: | MIT |
Preview:

Description:
Pure Html5 and CSS/CSS3 technique to create an animated caption overlay over the image with subtle image scale effects when mouse hover.
How to use it:
Insert an image with text caption using Html5 figure
and figcaption
tags.
<figure> <img src="demo.jpg" alt="Thumb" width="400" height="300"> <figcaption><div>Thumbnail Caption</div></figcaption> </figure>
The required CSS/CSS3 rules to create an animated caption hover overlay and the image scale effects.
figure{ width: 400px; height: 300px; overflow: hidden; position: relative; display: inline-block; vertical-align: top; border: 5px solid #fff; box-shadow: 0 0 5px #ddd; margin: 1em; } figcaption{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; font-weight: bold; width: 100%; height: 100%; display: table; } figcaption div{ display: table-cell; vertical-align: middle; position: relative; top: 20px; opacity: 0; color: #2c3e50; text-transform: uppercase; } figcaption div:after{ position: absolute; content: ""; left: 0; right: 0; bottom: 40%; text-align: center; margin: auto; width: 0%; height: 2px; background: #2c3e50; } figure img{ -webkit-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } figure:hover figcaption{ background: rgba(255,255,255,0.3); } figcaption:hover div{ opacity: 1; top: 0; } figcaption:hover div:after{ width: 50%; } figure:hover img{ -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); }