Image Caption Hover Animations with CSS3 Transitions and Transforms

Category: CSS & CSS3 , Image | December 11, 2013
Author: hasinhayder
Views Total: 6,175
Official Page: Go to website
Last Update: December 11, 2013
License: MIT

Preview:

Image Caption Hover Animations with CSS3 Transitions and Transforms

Description:

In this tutorial we’re going to create stylish and subtle image caption hover animations with CSS3 transitions and transform. No extra javascript needed.

Basic Usage:

1. Markup html structure.

<ul class="caption-style-1">
<li> <img src="img/1.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</ul>

2. The CSS rules.

.caption-style-1 {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li {
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-1 li:hover .caption {
opacity: 1;
}
.caption-style-1 img {
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-1 .caption {
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition: all 0.45s ease-in-out;
-moz-transition: all 0.45s ease-in-out;
-o-transition: all 0.45s ease-in-out;
-ms-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
.caption-style-1 .blur {
background-color: rgba(0,0,0,0.65);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}
.caption-style-1 .caption-text h1 {
text-transform: uppercase;
font-size: 24px;
}
.caption-style-1 .caption-text {
z-index: 10;
color: #fff;
position: absolute;
width: 400px;
height: 300px;
text-align: center;
top: 100px;
}

Check out more examples:

2 thoughts on “Image Caption Hover Animations with CSS3 Transitions and Transforms

  1. Flash Buddy

    Be aware that the image size is critical. The style calls for images 400x300px. If one uses a different size, the css will have to be edited to accomodate. Note too that it is not responsive so fails at viewport sizes below 400px (cell phones are around 320px).

    Reply

Leave a Reply