Imagen con texto

HTML

<div class="container-a4" style="width: 80%; min-height: 700px; margin: 0 auto;">
<ul class="caption-style-4">
<ul class="caption-style-4"><!-----Ajuster la valeur de width (ci-dessous à 60%) pour obtenir 2 ou 3 colonnes-----></ul>
</ul>
<div class="container-a4" style="width: 60%; min-height: 700px; margin: 0 auto;">
<ul class="caption-style-4">
<li><img src="http://gif" alt="" />
<div class="caption">
<div class="blur">&nbsp;</div>
<div class="caption-text">
<h1>Con amor</h1>
<p><a href="http://fondogifflashgloriav.ek.la/joyas-c25888332">Joyas</a></p>
</div>
</div>
</li>
<li><img src="http://gif" alt="" />
<div class="caption">
<div class="blur">&nbsp;</div>
<div class="caption-text">
<h1>Para mujer amada</h1>
<p><a href="http://parametriclab.eklablog.com/contact">Contact</a></p>
</div>
</div>
</li>
<li><img src="http://gif" alt="" />
<div class="caption">
<div class="blur">&nbsp;</div>
<div class="caption-text">
<h1>Parametric Lab</h1>
<p><a href="http://parametriclab.eklablog.com/lab-c25110128">Lab</a></p>
</div>


</div>
</li>
</ul>
</div>
</div>

CSS

<style type="text/css"><!--
h1,h2,h3,h4{
 padding: 0px;
 margin: 0px;
 }

 .caption-style-4{
 list-style-type: none;
 margin: 0px;
 padding: 0px;
 
 
 }
/*----------Image----------*/
 .caption-style-4 img {
 margin: 0px;
 padding: px;
 float: left;
 z-index: 4;
 width: 160px;/*---largeur img-----*/
 height: 180px;/*----hauteur img*/
}

 .caption-style-4 li{
 float: left;
 padding: 0px;
 position: relative;
 overflow: hidden;
 border-radius: 10%; 
 border: 1px dotted #000;
 box-shadow: 3px 3px 10px black;/*--ombre portée---*/
 }

 .caption-style-4 li:hover .caption{
 opacity: 1;
 }

 .caption-style-4 li:hover img{
 opacity: 1;
 transform: scale(1.15,1.15);
 -webkit-transform:scale(1.15,1.15);
 -moz-transform:scale(1.15,1.15);
 -ms-transform:scale(1.15,1.15);
 -o-transform:scale(1.15,1.15);
 }


 .caption-style-4 img{
 margin: 0px;
 padding: 0px;
 float: left;
 z-index: 4;
 }


 .caption-style-4 .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-4 img{
 -webkit-transition:all 0.25s ease-in-out;
 -moz-transition:all 0.25s ease-in-out;
 -o-transition:all 0.25s ease-in-out;
 -ms-transition:all 0.25s ease-in-out;
 transition:all 0.25s ease-in-out;
 }
 .caption-style-4 .blur{
 background-color: rgba(250,250,250,0.65);
 height: 300px;
 width: 400px;
 z-index: 5;
 position: absolute;
 }

 .caption-style-4 .caption-text h1{
 text-transform: uppercase;
 font-size: 24px;
 }
 .caption-style-4 .caption-text{
 z-index: 10;
 color: #fff;
 position: absolute;
 width: 300px;
 height: 200px;
 text-align: center;
 top:60px;
 }
--></style>