<style>
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
.enlarge {display:inline-block; position:relative; margin:0 auto;}
.frame {position:absolute; height:0; overflow:hidden; background:transparent; z-index:100; float:left;
-moz-transition:  0.25s linear 1.5s;
-ms-transition: 0.25s linear 1.5s;
-o-transition: 0.25s linear 1.5s;
-webkit-transition: 0.25s linear 1.5s;
transition: 0.25s linear 1.5s;
}
.pic1 .frame {left:200px; top:0;}
.pic2 .frame {left:100px; top:100px;}
.pic3 .frame {left:50px; top:200px;}
.pic4 .frame {left:200px; top:-100px;}
.caption {margin-top:-200px; position:relative; opacity:0; background:#000; padding:10px; z-index:5;
border-radius:0 0 10px 10px;
-moz-transition:  0.25s linear 0.5s;
-ms-transition: 0.25s linear 0.5s;
-o-transition: 0.25s linear 0.5s;
-webkit-transition: 0.25s linear 0.5s;
transition: 0.25s linear 0.5s;
}
.caption h1 {font:bold 24px/30px georgia, serif; color:#6c9; padding:0; margin:0;}
.caption p {font:normal 14px/20px georgia, serif; color:#ccc; padding:0; margin:0;}
.close {position:absolute; left:-9999px; top:0; width:200px; font:bold 15px/24px georgia, sans-serif; color:#aaa !important; 
text-decoration:none; opacity:0; margin-bottom:-40px; z-index:200;
-moz-transition:  0.25s linear 0s;
-ms-transition: 0.25s linear 0s;
-o-transition: 0.25s linear 0s;
-webkit-transition: 0.25s linear0s;
transition: 0.25s linear 0s;
}
.caption a {color:#6cf;}
.frame img {display:block; opacity:0; border:1px solid #fff;
-moz-transition: opacity 0.25s linear 0.75s;
-ms-transition: opacity 0.25s linear 0.75s;
-o-transition: opacity 0.25s linear 0.75s;
-webkit-transition: opacity 0.25s linear 0.75s;
transition: opacity 0.25s linear 0.75s;
}
.thumb {outline:0;display:block; float:left;}
.thumb img {display:block; border:1px solid #000;}
.thumb:focus ~ div.frame {height:1000px;
-moz-transition:  0s linear 0s;
-ms-transition: 0s linear 0s;
-o-transition: 0s linear 0s;
-webkit-transition: 0s linear 0s;
transition: 0s linear 0s;
}
div.framey {position:relative; z-index:10;
-moz-transform: scaleY(0.01);
-ms-transform: scaleY(0.01);
-o-transform: scaleY(0.01);
-webkit-transform: scaleY(0.01);
transform: scaleY(0.01);
-moz-transition: -moz-transform 0.25s linear 1.25s;
-ms-transition: -ms-transform 0.25s linear 1.25s;
-o-transition: -o-transform 0.25s linear 1.25s;
-webkit-transition: -webkit-transform 0.25s linear 1.25s;
transition: transform 0.25s linear 1.25s;
}
div.framex {background:#000; padding:25px 10px 10px 10px;
border-radius:10px 10px 0 0;
-moz-transform: scaleX(0.01);
-ms-transform: scaleX(0.01);
-o-transform: scaleX(0.01);
-webkit-transform: scaleX(0.01);
transform: scaleX(0.01);
-moz-transition: -moz-transform 0.25s linear 1s;
-ms-transition: -ms-transform 0.25s linear 1s;
-o-transition: -o-transform 0.25s linear 1s;
-webkit-transition: -webkit-transform 0.25s linear 1s;
transition: transform 0.25s linear 1s;
}
.thumb:focus ~ div.frame div.framey {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition: -moz-transform 0.5s linear 0s;
-ms-transition: -ms-transform 0.5s linear 0s;
-o-transition: -o-transform 0.5s linear 0s;
-webkit-transition: -webkit-transform 0.5s linear 0s;
transition: transform 0.5s linear 0s;
}
.thumb:focus ~ div.frame div.framey div.framex {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition: -moz-transform 0.5s linear 0.5s;
-ms-transition: -ms-transform 0.5s linear 0.5s;
-o-transition: -o-transform 0.5s linear 0.5s;
-webkit-transition: -webkit-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
.thumb:focus ~ div.frame img {opacity:1;
-moz-transition: opacity 0.5s linear 1.25s;
-ms-transition: opacity 0.5s linear 1.25s;
-o-transition: opacity 0.5s linear 1.25s;
-webkit-transition: opacity 0.5s linear 1.25s;
transition: opacity 0.5s linear 1.25s;
}
.thumb:focus ~ div.frame .caption {opacity:1; margin-top:-10px;
-moz-transition:  0.5s linear 1.75s;
-ms-transition: 0.5s linear 1.75s;
-o-transition: 0.5s linear 1.75s;
-webkit-transition: 0.5s linear 1.75s;
transition: 0.5s linear 1.75s;
}
.thumb:focus + .close {opacity:1; margin-bottom:0;
-moz-transition:  0.5s linear 1.75s;
-ms-transition: 0.5s linear 1.75s;
-o-transition: 0.5s linear 1.75s;
-webkit-transition: 0.5s linear 1.75s;
transition: 0.5s linear 1.75s;
}
.pic1 .thumb:active + .close {left:210px; top:0;}
.pic2 .thumb:active + .close {left:110px; top:100px;}
.pic3 .thumb:active + .close {left:60px; top:200px;}
.pic4 .thumb:active + .close {left:210px; top:-100px;}
.pic1 .thumb:focus + .close {left:210px; top:0;}
.pic2 .thumb:focus + .close {left:110px; top:100px;}
.pic3 .thumb:focus + .close {left:60px; top:200px;}
.pic4 .thumb:focus + .close {left:210px; top:-100px;}
</style>
<br><br>
&nbsp;&nbsp;<div class ="enlarge pic1"><a class ="thumb" href="#x" tabindex="1"><img src="pic1t.jpg" alt=""></a>
<a class ="close" href="#x">CLOSE X</a><div class ="frame"><div class ="framey"><div class ="framex">
<img src="pic1.jpg" alt=""></div></div><div class ="caption"><h1>Puna Teal</h1>
<p>The <a href="#" rel="nofollow">Puna Teal</a> (Anas puna) is a species of dabbling duck in the genus Anas. 
It was previously regarded as a subspecies of the Silver Teal.</p></div></div></div>
<div class ="enlarge pic2"><a class ="thumb" href="#x" tabindex="1"><img src="pic2t.jpg" alt=""></a>
<a class ="close" href="#x">CLOSE X</a><div class ="frame"><div class ="framey"><div class ="framex">
<img src="pic2.jpg" alt=""></div></div><div class ="caption"><h1>Flamingo</h1><p><a href="#" rel="nofollow">Flamingos</a>
 or flamingoes are gregarious wading birds in the genus Phoenicopterus. 
There are four flamingo species in the Americas and two species in the 
Old World.</p></div></div></div>
<div class ="enlarge pic3"><a class ="thumb" href="#x" tabindex="1"><img src="pic3t.jpg" alt=""></a>
<a class ="close" href="#x">CLOSE X</a><div class ="frame"><div class ="framey"><div class ="framex">
<img src="pic3.jpg" alt=""></div></div><div class ="caption"><h1>Greylag Goose</h1><p>The <a href="#" rel="nofollow">Greylag</a>
 is the largest and bulkiest of the grey Anser geese. It has a rotund, 
bulky body, a thick and long neck, and a large head and bill. It has 
pink legs and feet, and an orange or pink bill.</p></div></div></div>
<div class ="enlarge pic4"><a class ="thumb" href="#x" tabindex="1"><img src="pic4t.jpg" alt=""></a>
<a class ="close" href="#x">CLOSE X</a><div class ="frame"><div class ="framey"><div class ="framex">
<img src="pic4.jpg" alt=""></div></div><div class ="caption"><h1>Demoiselle Crane</h1>
<p>The <a href="#" rel="nofollow">Demoiselle Crane</a>,
 Anthropoides virgo, is a species of crane that breeds in Central Asia 
and winters in India, with a few found in Cyprus and eastern Turkey as 
well.</p></div></div></div>
<br><br><br><br><br>