js realizes the effect of displaying part of the picture and displaying the whole after the mouse passes_Image special effects

This is an example of an image magnification effect using CSS's negative margin value and relative positioning. The picture is only partial at first, and the entire picture is displayed when the mouse is placed on it.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Untitled Document</title> <style> body{ font-size:12px; } ul,li,ol{ margin:0; padding:0; list-style:none; } .box{ margin:100px; clear:both; border:1px solid #000; } .box ul li{ list-style:none; float:left; width:60px; height:60px; margin-left:10px; text-align:center; border:1px solid #ccc; } .box ul li a{ display:block; background:#f2f2f2; width:60px; height:60px; overflow:hidden; } .box a img{ margin:-25px 0px 0px -25px; border:0; } .box a:hover{ width:105px; height:140px; border:4px solid #f2f2f2; margin:-40px -50px -80px -50px; padding:1px; position:relative; }/* 璁剧疆</style>