Show Caption on Hover image using pure Css

This example helps you to show the image caption and contents on hover the particular image. When hover this image it displays caption and description when you mouse out it will hide. This concept is fully done by using pure css, This is very simple and useful for your website. In website some of the places you should implement this kind of images with caption for example people page, gallery page, etc... Here i will provide full source code and demo page, Check out this demo page how it was. 

Html code for Show caption on hover:

<h1>Display caption on hover the image with animated fade</h1>
<p>Simply follow this css and html you can able to do this hover effect. this is very useful to people page and other page in your website.</p>
<ul class="san-style">
<li>
<img src="img/caption-hover-image-1.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Hover Caption Heading</h1>
<p>Hover caption content</p>
</div>
</div>
</li>
<li>
<img src="img/caption-hover-image-2.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Hover Caption Heading</h1>
<p>Hover caption content</p>
</div>
</div>
</li>
<li>
<img src="img/caption-hover-image-3.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Hover Caption Heading</h1>
<p>Hover caption content</p>
</div>
</div>
</li>
<li>
<img src="img/caption-hover-image-4.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Hover Caption Heading</h1>
<p>Hover caption content</p>
</div>
</div>
</li>
<li>
<img src="img/caption-hover-image-2.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Hover Caption Heading</h1>
<p>Hover caption content</p>
</div>
</div>
</li>
<li>
<img src="img/caption-hover-image-1.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Hover Caption Heading</h1>
<p>Hover caption content</p>
</div>
</div>
</li>
</ul>

Css code for on hover effect:

body{
font-family: "Lato";
background-color: #fff;
padding:20px 30px;
margin: 0px;
}

h1,h2,h3,h4{
padding: 0px;
margin: 0px;
}
.san-style{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.san-style li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}

.san-style li:hover .caption{
opacity: 1;
transform: translateY(-100px);
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);
margin: 2px;
}
.san-style img{
margin: 2px;
padding: 0px;
float: left;
z-index: 4;
width:400px;
height:300px;
}
.san-style .caption{
cursor: pointer;
position: absolute;
opacity: 0;
top:300px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;

}
.san-style .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}

.san-style .caption-text h1{
text-transform: uppercase;
font-size: 18px;
}
.san-style .caption-text{
z-index: 10;
color: #fff;
position: absolute;
width: 400px;
height: 300px;
text-align: center;
top:20px;
}