CSS Manufacturing: Move the mouse up to display the larger image_Experience Exchange

<base href="http://blog.pr1984.com"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Move the mouse up to display the larger image</title> <style type="text/css"> <!-- .pr { position:relative; } .pr a { border:1px solid gray; padding:3px; width:200px; height:153px; font-size:12px; text-decoration:none; background:url("no.gif"); position:absolute; left:0; top:0; z-index:2; text-indent:-9999px; } .pr a:hover { width:10px; height:362px; padding:10px 494px 0 10px; text-indent:0; background:#fff url("attachments/month_0608/o200682352117.jpg") no-repeat 35px 3px; } .pr img { border:1px solid gray; padding:3px; width:200px; position:relative; z-index:1;} .pr2 a { display:block; width:206px; } .pr2 a img { border:1px solid gray; padding:3px; width:200px; } .pr2 a:hover { border:1px solid gray; padding:3px; width:200px; height:369px; padding:3px 484px 0 3px; font-size:12px; text-decoration:none; text-indent:0; background:#fff url("attachments/month_0608/o200682352117.jpg") no-repeat 206px 3px; } .pr2 a:hover img { border:none; padding:0; } --> </style> <div class="pr"> <img src="attachments/month_0608/o200682352117.jpg" alt="CSS Manufacturing: Move the mouse up to display the larger image_Experience Exchange"> <a href="#">Effect 1</a> </div> <div class="pr2"> <a href="#"><img src="attachments/month_0608/o200682352117.jpg" alt="CSS Manufacturing: Move the mouse up to display the larger image_Experience Exchange"></a> </div>