When you move the mouse over an image thumbnail, a large image is displayed, which seems to be a common effect on the Internet and has many implementation methods, some people use CSS, some use JavaScript, and some use jQuery. In short, it is best to choose the method you are used.
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <title> Image Display Effect </title> <style type =" text/css "> body {margin: 0; padding: 40px; line-height: 180%;} img {border: none;} ul, li {margin: 0; padding: 0;} li {list-style: none; display: inline; border: 1px solid #999; float: left; margin-right: 10px;}/* tooltip */# tooltip {position: absolute; border: 1px solid # CCC; display: none; color: # FFF; padding: 2px; background: #333 ;} </style> </pead> <body> effect <ul> <li> </li> </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]