CSS3实现在图片上显示文字信息，带有类似js控制的平滑移动效果，无任何脚本代码，需要浏览器支持CSS3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现的平滑显示的图片信息 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="CSS3实现的平滑显示的图片信息,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<style type="text/css">
.wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;}
.wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;}
.wrap img {border:0;}
.wrap i {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:#000; filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
-webkit-transition: all 0.6s ease-in-out; }
.wrap p {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
}
.wrap p b {display:block; font-size:22px; color:#fc0; text-align:center; margin:0; padding:0; line-height:30px;}
.wrap p span {display:block; padding:10px; line-height:20px;}
.wrap a:hover {direction:ltr;}
.wrap a:hover i {top:0;}
.wrap a:hover p {top:0;}
.clear {clear:left;}
</style>
</head>
<body>
<div class="wrap">
<a href="#x">
<img src='photo-info/frog.jpg' alt='' />
<i></i>
<p>
<b>Red Eye Frog</b>
<span>Red-eyed tree frogs, as their name states, have bold red eyes 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. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</span>
</p>
</a>
</div> <!-- end wrap -->
<div class="wrap">
<a href="#x">
<img src='photo-info/emperor.jpg' alt='' />
<i></i>
<p>
<b>Emperor Penguin</b>
<span>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.<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 white belly, pale-yellow breast and bright-yellow ear patches.
</span>
</p>
</a>
</div> <!-- end wrap -->
<div class="wrap">
<a href="#x">
<img src='photo-info/pelican.jpg' alt='' />
<i></i>
<p>
<b>Pelicans</b>
<span>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.<br /><br />
Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.
</span>
</p>
</a>
</div>
<br><br>
<div align="center">
<script language="javascript" src="http://www.sharejs.com/js/720.js"></script>
<br><br>
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
<br>
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>
