<style type="text/css">
#info {position:relative; z-index:10;}
a, a:visited, a:hover, a:active {}
#gallery {width:740px; height:400px; position:relative; z-index:100; padding-right:10px;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
#gallery ul li a b {position:absolute; visibility:hidden; left:0; top:5px; display:block; width:560px; height:350px; background:#fff;
filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}
#gallery ul li a b img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}
#gallery ul li a:hover {white-space:normal; outline:0;}
#gallery ul li a:hover b {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:1; visibility:visible;}
#gallery ul li a:hover b img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto; border:1px solid #444;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#gallery ul li a b {text-align:center; z-index:-1;}
#gallery ul li a b span {display:block; width:0; height:100%; display:inline-block; vertical-align:middle;}
#gallery ul li a b img {margin:0 auto; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->
<div id="gallery">
<ul>
    <li><a href="#x" aria-haspopup="true"><img src="t1.jpg" alt=""><b><span></span>
<i><img src="t1.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t2.jpg" alt=""><b><span></span><i>
<img src="t2.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t3.jpg" alt=""><b><span></span><i>
<img src="t3.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t4.jpg" alt=""><b><span></span><i>
<img src="t4.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t5.jpg" alt=""><b><span></span><i>
<img src="t5.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t6.jpg" alt=""><b><span></span><i>
<img src="t6.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t7.jpg" alt=""><b><span></span><i>
<img src="t7.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t8.jpg" alt=""><b><span></span><i>
<img src="t8.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t9.jpg" alt=""><b><span></span><i>
<img src="t9.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t10.jpg" alt=""><b><span></span><i>
<img src="t10.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t11.jpg" alt=""><b><span></span><i>
<img src="t11.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="p1.jpg" alt=""><b><span></span><i>
<img src="p1.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t13.jpg" alt=""><b><span></span><i>
<img src="t13.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t14.jpg" alt=""><b><span></span><i>
<img src="t14.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t15.jpg" alt=""><b><span></span><i>
<img src="t15.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t16.jpg" alt=""><b><span></span><i>
<img src="t16.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t17.jpg" alt=""><b><span></span><i>
<img src="t17.jpg" alt=""></i></b></a></li>
    <li><a href="#x" aria-haspopup="true"><img src="t18.jpg" alt=""><b><span></span><i>
<img src="t18.jpg" alt=""></i></b></a></li>
</ul>
</div>