CSS实现简易相册方法

功能分析：

　　　　相册在默认情况下以缩略图的形式显示，并且不压缩相片的原有宽度和高度属性，而是取相册的某个部分作为缩略图形式。

　　　　当鼠标悬停于某张缩略图上时，相册列表中的缩略图恢复为原始相片的宽度和高度，展现在相册的某个固定的区域，同时缩略图为空。

　　关键css代码：

li a{
    display:block;
    width:70px;
    height:70px;
    overflow:hidden; /*important*/
    float:left;
    margin:0.5px;
    border:2px solid #efdeb0;
}

li a:hover img{
    position:absolute;  /*定位 */
    width:550px;
    height:550px;
    top:10px;
    left:10px;
    margin:0;
    border:4px soild #a98175;
}

　　　　参考《CSS那些事》  位于本地电脑webcontent/photo.html|css

转载于:https://www.cnblogs.com/viltran/archive/2013/04/21/3034522.html