CSS制作图片弹出展示效果

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

HTML代码:

1. <DIVid=pic>
2. <Aclass=p1title="thumbnailimage"
   
3. href="http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm">
4. <imgtitle="BeautyTn"height=100src="Beauty-tn.jpg"width=100>
5. <IMGclass=largetitle="Beauty"height=498src="Beauty.jpg"width=500>
6. </A>
7. </DIV>

对应的CSS:

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

很简单就实现了