css div 滑鼠經過時圖片變大

<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;

height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;

position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;

overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px;

height:80px; z-index:100;}

#div1 .div2
{
    float:left; width:40px; height:40px; position:relative;
}

#div1 .div2 a {display:block; width:40px; height:40px; background:transparent;

overflow:hidden; position:relative;}
#div1 .div2 a img {width:100%; height:100%; border:0;}
#div1 .div2 a:hover {position:absolute; left:-20px; top:-20px; width:80px;

height:80px; z-index:100;}
</style>

<ul id="enlarge">
<li><a href="#one"><img src="http://www.dzwindows.com/images12_13/logo.png" alt="image 1"

title="image 1" />Image 1</a></li>

</ul>

<div id="div1">
    <div class="div2">
      <a href="#">
    <img src="http://www.dzwindows.com/images12_13/logo.png" alt="image 1"

title="image 1" />
      </a>
   </div>
</div>