Image Caption Hover Animations with CSS3 Transitions and Transforms

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:

• Example 1
• Example 2
• Example 3
• Example 4