<link rel="stylesheet" type="text/css" href="/css/demo.css" />

.lb-album {  
width: 900px;  
margin: 0 auto;  
font-family:'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;  
  }  
  .lb-album li {  
float: left;  
margin: 5px;  
position: relative;  
list-style:none;  
  }  
  .lb-album li > a, .lb-album li > a img {  
display: block;  
  }  
  .lb-album li > a {  
width: 150px;  
height: 150px;  
position: relative;  
padding: 10px;  
background: #f1d2c2;  
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158, 111, 86, 0.3) inset;  
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158, 111, 86, 0.3) inset;  
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158, 111, 86, 0.3) inset;  
-moz-border-radius: 4px;  
-webkit-border-radius: 4px;  
border-radius: 4px 4px 4px 4px;  
  }  
  .lb-album li > a span {  
position: absolute;  
width: 150px;  
height: 150px;  
top: 10px;  
left: 10px;  
text-align: center;  
line-height: 150px;  
color: rgba(27, 54, 81, 0.8);  
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);  
font-size: 24px;  
opacity: 0;  
filter: alpha(opacity=0);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";  
/*IE8*/  
background: rgb(241, 210, 194);  
background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0.56)), color-stop(100%, rgba(241, 210, 194, 1)));  
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
-webkit-transition: opacity 0.3s linear;  
-moz-transition: opacity 0.3s linear;  
-o-transition: opacity 0.3s linear;  
-ms-transition: opacity 0.3s linear;  
transition: opacity 0.3s linear;  
  }  
  .lb-album li > a:hover span {  
opacity: 1;  
filter: alpha(opacity=99);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";  
/*IE8*/  
  }  
  .lb-overlay {  
width: 0px;  
height: 0px;  
position: fixed;  
overflow: hidden;  
left: 0px;  
top: 0px;  
padding: 0px;  
z-index: 99;  
text-align: center;  
background: rgb(241, 210, 194);  
background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0.56)), color-stop(100%, rgba(241, 210, 194, 1)));  
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%);  
  }  
  .lb-overlay > div {  
position: relative;  
color: rgba(27, 54, 81, 0.8);  
width: 550px;  
height: 80px;  
margin: 40px auto 0px auto;  
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);  
  }  
  .lb-overlay div h3, .lb-overlay div p {  
padding: 0px 20px;  
width: 200px;  
height: 60px;  
  }  
  .lb-overlay div h3 {  
font-size: 36px;  
float: left;  
text-align: right;  
border-right: 1px solid rgba(27, 54, 81, 0.4);  
  }  
  .lb-overlay div h3 span, .lb-overlay div p {  
font-size: 16px;  
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;  
font-style: italic;  
  }  
  .lb-overlay div h3 span {  
display: block;  
line-height: 6px;  
  }  
  .lb-overlay div p {  
font-size: 14px;  
text-align: left;  
float: left;  
width: 260px;  
  }  
  .lb-overlay a.lb-close {  
background: rgba(27, 54, 81, 0.8);  
z-index: 1001;  
color: #fff;  
position: absolute;  
top: 43px;  
left: 50%;  
font-size: 15px;  
line-height: 26px;  
text-align: center;  
width: 50px;  
height: 23px;  
overflow: hidden;  
margin-left: -25px;  
opacity: 0;  
filter: alpha(opacity=0);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";  
/*IE8*/  
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);  
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);  
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);  
  }  
  .lb-overlay img {  
/* height: 100%; For Opera max-height does not seem to work */  
max-height: 100%;  
position: relative;  
opacity: 0;  
filter: alpha(opacity=0);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";  
/*IE8*/  
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);  
-webkit-transition: opacity 0.5s linear;  
-moz-transition: opacity 0.5s linear;  
-o-transition: opacity 0.5s linear;  
-ms-transition: opacity 0.5s linear;  
transition: opacity 0.5s linear;  
  }  
  .lb-prev, .lb-next {  
text-indent: -9000px;  
position: absolute;  
top: -32px;  
width: 24px;  
height: 25px;  
left: 50%;  
opacity: 0.8;  
filter: alpha(opacity=80);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";  
/*IE8*/  
  }  
  .lb-prev:hover, .lb-next:hover {  
opacity: 1;  
filter: alpha(opacity=99);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";  
/*IE8*/  
  }  
  .lb-prev {  
margin-left: -30px;  
background: transparent url(/img/arrows.png) no-repeat top left;  
  }  
  .lb-next {  
margin-left: 6px;  
background: transparent url(/img/arrows.png) no-repeat top right;  
  }  
  .lb-overlay:target {  
width: auto;  
height: auto;  
bottom: 0px;  
right: 0px;  
padding: 80px 100px 120px 100px;  
  }  
  .lb-overlay:target img, .lb-overlay:target a.lb-close {  
opacity: 1;  
filter: alpha(opacity=99);  
/* internet explorer */  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";  
/*IE8*/  
  }  
  /*
100% Height for Opera as the max-height seems to be ignored, not optimal for large screens
http://bricss.net/post/11230266445/css-hack-to-target-opera
  */  
x:-o-prefocus, .lb-overlay img {  
height: 100%;  
  }

<ul class="lb-album">  
  <li>  
  <a href="#image-1">  
  <img src="Ссылка на миниатюру" alt="image01" />  
  <span>Заголовок 1</span>  
  </a>  
  <div class="lb-overlay" id="image-1">  
  <img src="Ссылка на большую картинку" alt="image01" />  
  <div>  
  <h3>Название<span>/теги/</h3>  
  <p>Описание к картинке</p>  
  <a href="#image-10" class="lb-prev">Prev</a>  
  <a href="#image-2" class="lb-next">Next</a>  
  </div>  
  <a href="#page" class="lb-close">x Close</a>  
  </div>  
  </li>  
  <li>  
  <a href="#image-2">  
  <img src="Ссылка на миниатюру" alt="image02" />  
  <span>Заголовок 2</span>  
  </a>  
  <div class="lb-overlay" id="image-2">  
  <img src="Ссылка на большую картинку" alt="image02" />  
  <div>  
  <h3>Название<span>/теги/</h3>  
  <p>Описание к картинке</p>  
  <a href="#image-10" class="lb-prev">Prev</a>  
  <a href="#image-2" class="lb-next">Next</a>  
  </div>  
  <a href="#page" class="lb-close">x Close</a>  
  </div>  
  </li>  
  </ul>