Show Caption on Hover image using pure Css

<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>

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;
}