仅用CSS+HTML实现图片放大功能

备注：最好在firefox或chrome运行，在IE效果没出现  -。-

效果如下：

备注：实现这个功能我仅使用了一个html和一个css，具体代码如下，好的话可以拿去：

-----Fancy.html-----

CSS3 Image Gallery

    

        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
    

-----Fancy.css------

@CHARSET "UTF-8";
body {
    background: url("./images/sdl (31).png");
    background-attachment: fixed;
    text-align: center;
}
h1 {    
    color: #FBF6FD;
    font-size: 60px;
    text-shadow: #272229 2px 2px 4px;
}
#gallery {
    border: 10px solid #feeeed;
    height: 300px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    background: #00ae9d;
    /* box shadow effect in Safari and Chrome*/
    -webkit-box-shadow: #272229 10px 10px 20px;
    /* box shadow effect in Firefox*/
    -moz-box-shadow: #272229 10px 10px 20px;
    /* box shadow effect in IE*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
    /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
    box-shadow: #272229 10px 10px 20px;
}
#gallery ul{
    /* This position the ul content in the middle of the gallery*/
    margin-left:-30px; 
    }
#gallery ul li {
    /* In order to create the proper effect with hover we should use display inline-table
       This will display the big picture right next to its thumbnail
    */
    list-style:none; display:inline-table; padding:10px;
    }
/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
#gallery ul li .pic{
    /* Animation with transition in Safari and Chrome */
    -webkit-transition: all 0.6s ease-in-out;
    /* Animation with transition in Firefox (No supported Yet) */
    -moz-transition: all 0.6s ease-in-out;
    /* Animation with transition in Opera (No supported Yet)*/
    -o-transition: all 0.6s ease-in-out;
    /* The the opacity to 0 to create the fadeOut effect*/
    opacity:0;
    visibility:hidden; 
    position:absolute; 
    margin-top:10px; 
    margin-left:-20px; 
    border:1px solid black;
    /* box shadow effect in Safari and Chrome*/
    -webkit-box-shadow:#272229 2px 2px 10px;
    /* box shadow effect in Firefox*/
    -moz-box-shadow:#272229 2px 2px 10px;
    /* box shadow effect in IE*/
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
    /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
}
#gallery ul li .mini:hover{
    cursor:pointer;
}
/* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
    /* width and height is how much the picture is going to growth with the effect */
    width:200px; 
    height:200px;
    opacity:1; 
    visibility:visible; 
    float:right;
}