Author: | pdelsignore |
---|---|
Views Total: | 14,467 views |
Official Page: | Go to website |
Last Update: | July 22, 2014 |
License: | MIT |
Preview:

Description:
An animated image caption with a subtle image zoom effect on hover, based on CSS3 transitions and transforms.
How to use it:
Insert an image into your document.
<img src="1.jpg">
Create a mask with text captions on the image.
<div class="mask"> <h2>...</h2> <p>...</p> </div>
The whole Html markup should be like this.
<div class="box"> <img src="1.jpg"> <div class="mask"> <h2>...</h2> <p>...</p> </div> </div>
The core CSS styles.
.mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; } h2, p { margin: 20px 0 0 250px; position: relative; text-align: center; color: #333; } h2 { font-weight: normal !important; font-family: 'Nova Square', cursive; font-size: 22px; text-transform: uppercase; background: rgba(0, 0, 0, 0.8); background: transparent; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } p { font-weight: normal !important; font-family: verdana, sans-serif; font-size: 18px; text-align: center; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .box { z-index: 9; cursor: default; overflow: hidden; text-align: center; position: relative; } img { display: block; left: 10px; margin-left: -10px; position: relative; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; width: 600px; height: 350px; }
Animate the image and text captions on mouse hover.
.box:hover > img { -webkit-transform: scale(8); -moz-transform: scale(8); -o-transform: scale(8); -ms-transform: scale(8); transform: scale(8); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; } .box:hover h2, .box:hover p { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }