css鼠标放上之后图片变大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Absolute positioning | Transcending CSS</title>

<style type="text/css">

/* Normalizes margin, padding */
body, ul, li, h3, p { margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h3 { font-size : 100%; }

/* Removes list-style from lists */
ul { list-style : none; }

/* Removes border from fieldset and img */
img { border : 0; }

html     { text-align : center; }

body     { 
width : 80%; 
margin : 0 auto;
padding : 40px 0; 
background-color : #fff; 
font : 72%/1.6 "Lucida Grande","Lucida Sans Unicode", Verdana, sans-serif; 
color : #333; }

ul { 
position : relative;
float : left;
width : 316px;
margin-right : 20px; 
padding : 350px 10px 40px 10px; 
background-color : #fcf3ea; 
border : 1px solid #dab69c; }

li, h3, p { display : inline; }
li p { color : #666; }

h3 img { 
position : absolute; 
padding : 1px;
height : 100px; 
width : 100px;
outline : 1px solid #ccc; } 

li#pomegranate h3 img { top : 10px; left : 10px; }
li#carrot h3 img { top : 10px; left : 115px; }
li#onion h3 img { top : 10px; left : 220px; }
li#gourd h3 img { top : 115px; left : 10px; }
li#strawberry h3 img { top : 115px; left : 115px; }
li#lily h3 img { top : 115px; left : 220px; }
li#fig h3 img { top : 220px; left : 10px; }
li#wine h3 img { top : 220px; left : 115px; }
li#bean h3 img { top : 220px; left : 220px; }

a:hover img { 
z-index : 100; 
width : 160px; 
height : 160px; 
padding : 5px; 
background-color : #fff; 
border : 1px solid #333; }

li#pomegranate h3 a:hover img { top : -30px; left : -30px; }
li#carrot h3 a:hover img { top : -30px; left : 80px; }
li#onion h3 a:hover img { top : -30px; left : 180px; }
li#gourd h3 a:hover img { top : 80px; left : -30px; }
li#strawberry h3 a:hover img { top : 80px; left : 80px; }
li#lily h3 a:hover img { top : 80px; left : 180px; }
li#fig h3 a:hover img { top : 180px; left : -30px; }
li#wine h3 a:hover img { top : 180px; left : 80px; }
li#bean h3 a:hover img { top : 180px; left : 180px; }

a:link, a:visited, a:hover, a:active { 
text-decoration : underline; 
color : #894a4f; }
</style>

</head>

<body>

<ul>

<li id="pomegranate">
<h3><a href="#pomegranate"><img src="1-1.jpg" alt="" />Pomegranate</a></h3>

</li>

<li id="carrot">
<h3><a href="#carrot"><img src="1-2.jpg" alt="" />Carrot</a></h3>
</li>

<li id="onion">
<h3><a href="#onion"><img src="1-3.jpg" alt="" />Onion</a></h3>
</li>

<li id="gourd">
<h3><a href="#gourd"><img src="1-4.jpg" alt="" />Gourd</a></h3>
</li>

<li id="strawberry">
<h3><a href="#strawberry"><img src="1-5.jpg" alt="" />Strawberry</a></h3>
</li>

<li id="lily">
<h3><a href="#lily"><img src="1-6.jpg" alt="" />Lily</a></h3>
</li>

<li id="fig">
<h3><a href="#fig"><img src="1-7.jpg" alt="" />Fig</a></h3>
</li>

<li id="wine">
<h3><a href="#wine"><img src="1-8.jpg" alt="" />Wine</a></h3>
</li>

<li id="bean">
<h3><a href="#bean"><img src="1-9.jpg" alt="" />Bean</a></h3>
</li>
</ul>

</body>
</html>