It's funny, there's no technical content, I laughed.
No use to JS, pure CSS control.
The pop-up image does not "squeeze" the next container.
Test passed IE7 Firefox2.11. (Theory compatible IE6)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <TITLE>WWW.JB51.NET Cloud Habitat Community Mouse over thumbnails zoom image </title> <style type=" Text/css "> <!--* {margin:0;padding:0;} Body {Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:12px;} img {border:0} p {font-size:14px} #imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid;position:relative;*position:static;} #imgmove img {position:absolute;left:0px;top:0px;clip:rect (0px 50px 40px 0px); z-index:0;*position:static;} #imgmove img:hover {position:relative left:-3px; top:-3px; border:3px #f00 solid; z-index:2 clip:rect (0px 137px 137px 0p x);} --> </style> </pead> <body> <p> This example is designed to show that when you slide the mouse over the thumbnail,Big picture. </p> <!--[if IE 6]><! [endif]--> <ul id= "Imgmove" > <li></li> <li></li> <li></li> </ul > <!--[if IE 6]><! [endif]--> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
