CSS制作图片弹出展示效果

当你将鼠标放在缩略图上，旁边会弹出，一张完整的展示图，没有用到任何的js，用css就能实现。

HTML代码:

1. <DIV id=pic>
2. <A class=p1 title="thumbnail image"
   
3.    href="http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm">
4.   <img title="BeautyTn" height=100 src="Beauty-tn.jpg" width=100>
5.   <IMG class=large title="Beauty" height=498 src="Beauty.jpg" width=500>
6. </A>
7. </DIV>

对应的CSS:

1. #pic {WIDTH: 100px; BACKGROUND-COLOR: #ffffff; margin: 100px 0 0 80px;}
2. #pic A .large { BORDER: 0px; DISPLAY: block; WIDTH:0px; HEIGHT: 0px; } /*首先将大的展示图的高宽设为0，既不显示*/
3. #pic A IMG { BORDER: 0px;}
4. #pic A.p1 {
   
5.             BORDER: #000000 1px solid; DISPLAY: block;
   
6.             BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px;
   
7.             TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none
8.           }
9. #pic A.p1:visited {
   
10.                     BORDER: #000000 1px solid; DISPLAY: block;
11.                     BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP:
    
12.                     0px; HEIGHT: 100px; TEXT-DECORATION: none
13.                   }
14. #pic A.p1:hover {COLOR: #000000; BACKGROUND-COLOR: #8c97a3; TEXT-DECORATION: none}
15. #pic A.p1:hover .large {
16.                          BORDER: #000000 1px solid; DISPLAY: block;
    
17.                          LEFT: 150px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 498px 
18.                        }
    
19. /*当鼠标经过缩略图时，展示图再设定的绝对位置显示*/

很简单就实现了