備註：最好在firefox或chrome運行，在IE效果沒出現 -。-
效果如下：
備註：實現這個功能我僅使用了一個html和一個css，具體代碼如下，好的話可以拿去：
-----Fancy.html-----
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="Fancy.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CSS3 Image Gallery</h1>
<div id="gallery">
<ul>
<li>
<img src="Fancyimg/imagen1_small.jpg" class="mini" width="100" height="100" /><img src="Fancyimg/imagen1.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen2_small.jpg" class="mini" width="100" height="100" /><img src="Fancyimg/imagen2.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen3_small.jpg" class="mini" width="100" height="100" alt="" /><img src="Fancyimg/imagen3.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen4_small.jpg" class="mini" width="100" height="100" alt="" /><img src="Fancyimg/imagen4.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen5_small.jpg" class="mini" width="100" height="100" /><img src="Fancyimg/imagen5.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen6_small.jpg" class="mini" width="100" height="100" /><img src="Fancyimg/imagen6.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen7_small.jpg" class="mini" width="100" height="100" alt="" /><img src="Fancyimg/imagen7.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen8_small.jpg" class="mini" width="100" height="100" alt="" /><img src="Fancyimg/imagen8.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen9_small.jpg" class="mini" width="100" height="100" /><img src="Fancyimg/imagen9.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen10_small.jpg" class="mini" width="100" height="100" /><img src="Fancyimg/imagen10.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen11_small.jpg" class="mini" width="100" height="100" alt="" /><img src="Fancyimg/imagen11.jpg" class="pic" />
</li>
<li>
<img src="Fancyimg/imagen12_small.jpg" class="mini" width="100" height="100" alt="" /><img src="Fancyimg/imagen12.jpg" class="pic" />
</li>
</ul>
</div>
</body>
</html>-----Fancy.css------
@CHARSET "UTF-8";
body {
background: url("./images/sdl (31).png");
background-attachment: fixed;
text-align: center;
}
h1 {
color: #FBF6FD;
font-size: 60px;
text-shadow: #272229 2px 2px 4px;
}
#gallery {
border: 10px solid #feeeed;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background: #00ae9d;
/* box shadow effect in Safari and Chrome*/
-webkit-box-shadow: #272229 10px 10px 20px;
/* box shadow effect in Firefox*/
-moz-box-shadow: #272229 10px 10px 20px;
/* box shadow effect in IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow: #272229 10px 10px 20px;
}
#gallery ul{
/* This position the ul content in the middle of the gallery*/
margin-left:-30px;
}
#gallery ul li {
/* In order to create the proper effect with hover we should use display inline-table
This will display the big picture right next to its thumbnail
*/
list-style:none; display:inline-table; padding:10px;
}
/* This is the pic to display when the hover action occur over the li that contains the thumbnail */
#gallery ul li .pic{
/* Animation with transition in Safari and Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.6s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The the opacity to 0 to create the fadeOut effect*/
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid black;
/* box shadow effect in Safari and Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
}
#gallery ul li .mini:hover{
cursor:pointer;
}
/* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
/* width and height is how much the picture is going to growth with the effect */
width:200px;
height:200px;
opacity:1;
visibility:visible;
float:right;
}