<style type="text/css">
#container {width:550px; margin:0 auto; border-top:2px solid #000;} /* this demo only - for positioning */
#container h5 {font:bold 14px/50px arial, sans-serif; padding:0; margin:0;}
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
/* for Internet Explorer to force a menu refresh after :active + ul */
#gallery a,
html {behavior:url(cssplay21/trigger.htc)}
#gallery {position:relative; width:57px; float:left;}
a.thumb {display:block; width:55px; height:83px; padding:1px; outline:0;}
a.thumb img {display:block; width:100%; border:0;}
.large {padding:0; margin:0; list-style:none; width:220px; position:absolute; overflow:hidden; height:0; 
top:-50px; left:200px;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large li {width:220px; height:330px; position:absolute; top:0;}
.large li i {display:block; width:220px; height:330px; background:#000; position:absolute; z-index:3; 
top:330px; opacity:0.4; filter: alpha(opacity=40);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large li img {position:absolute; top:-330px; z-index:2; opacity:0; filter: alpha(opacity=0);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large span {width:200px; height:310px; position:absolute; z-index:4; top:330px; padding:10px; color:#fff; 
font:normal 12px/18px arial, sans-serif;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large span b {display:block; font:bold 16px/30px arial, sans-serif; color:#fc6;}
.large span a {color:#9cf; font-weight:bold;}
.large li em {font:normal normal 12px/25px arial, sans-serif; display:block; position:absolute; left:0; 
bottom:0; z-index:10; width:200px; padding:0 10px; height:25px; text-align:center; background:#666; 
color:#fff; cursor:pointer;}
a.a1:active ~ .img1 {height:330px;}
a.a1:active ~ .img1 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a2:active ~ .img2 {height:330px;} 
a.a2:active ~ .img2 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a3:active ~ .img3 {height:330px;}
a.a3:active ~ .img3 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a1:focus ~ .img1 {height:330px;}
a.a1:focus ~ .img1 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a2:focus ~ .img2 {height:330px;}
a.a2:focus ~ .img2 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a3:focus ~ .img3 {height:330px;}
a.a3:focus ~ .img3 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
ul.large:hover {height:330px; display:block;}
ul.large:hover img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
ul.large:hover li:hover {direction:ltr;}
ul.large:hover li:hover i {top:0;}
ul.large:hover li:hover img {top:0;}
ul.large:hover li:hover span {top:0;}
p.text {width:450px; padding:0 20px; margin:0; line-height:21px; float:left; font-family:arial, sans-serif; font-size:12px; 
color:#666;}
</style>
<div id="container">
<h5>Information Panels</h5>
<div id="gallery">
<a class ="thumb a1" href="#url" tabindex="1"><img src="frog.jpg" alt=""></a>
<a class ="thumb a2" href="#url" tabindex="1"><img src="emperor.jpg" alt=""></a>
<a class ="thumb a3" href="#url" tabindex="1"><img src="pelican.jpg" alt=""></a>
<ul class ="img1 large" aria-haspopup="true">
<li aria-haspopup="true"><img src="frog.jpg" alt="">
<i></i>
<span><b>Red Eye Frog</b>
Red-eyed tree frogs, as their name states, have <a href="#">bold red eyes</a>
 with vertically narrowed pupils, a vibrant green body with yellow and 
blue striped sides, and orange toes. There is a great deal of regional 
variation in flank and thigh coloration.<br><br> 
Although it has been suggested that <a href="#">A. callidryas'</a> bright colors function as aposematic or sexual signals, 
neither of these hypotheses have been confirmed.
</span>
<em>Hover for info panel / Click to close</em>
</li>
</ul>
<ul class ="img2 large" aria-haspopup="true">
<li aria-haspopup="true"><img src="emperor.jpg" alt="">
<i></i>
<span><b>Emperor Penguin</b>
The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to 
<a href="#">Antarctica</a>.<br><br>
 The male and female are similar in plumage and size, reaching 122 cm (48
 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The 
dorsal parts are black and sharply delineated from the <a href="#">white belly</a>
, pale-yellow breast and bright-yellow ear patches.
</span>
<em>Hover for info panel / Click to close</em>
</li>
</ul>
<ul class ="img3 large" aria-haspopup="true">
<li aria-haspopup="true"><img src="pelican.jpg" alt="">
<i></i>
<span><b>Pelicans</b>
A pelican is a large water bird with a distinctive pouch under the <a href="#">beak</a>
, belonging to the bird family Pelecanidae.<br><br>
Along with the darters, cormorants, gannets, boobies, frigatebirds, and <a href="#">tropicbirds</a>
, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.
</span>
<em>Hover for info panel / Click to close</em>
</li>
<ul>
</ul></ul></div>
<p class ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Donec vitae nisl ligula, at mattis tellus. Mauris tempor molestie felis
 vitae blandit. Mauris varius porta vulputate. <a href="#">Nunc lectus ipsum</a>,
 ultricies et dapibus nec, lacinia at enim. Nam blandit aliquet sem a 
consectetur. Duis mollis laoreet pellentesque. Nunc lacinia, ipsum ut 
adipiscing ultrices, sapien enim lacinia arcu, consectetur laoreet 
lectus ipsum sit amet justo. Curabitur ante metus, accumsan vel pretium 
quis, consequat a sapien. Proin lacus tortor, sollicitudin vitae 
malesuada eu, ultricies non quam. Mauris sit amet sapien enim, tincidunt
 blandit erat. Fusce congue, justo id faucibus pretium, arcu quam ornare
 sapien, sed dignissim ipsum dolor eu eros. Nulla rhoncus nibh at urna 
dictum ac sollicitudin ipsum condimentum. Sed vel tempus tellus. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos. Aliquam erat volutpat.</p>
</div>
<br class ="clear">
<br>