CSS实现的图片缩进效果

鼠标未移动时：

鼠标悬停在某一张图片时：一张展开，其余的图片缩进。

代码部分

CSS代码：

@charset "utf-8";
/* CSS Document */

/*Now the styles*/
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: arial, verdana, tahoma;
    background-color: #ccc;
    background-image: url(../.idea/pic/1.gif);
    background-repeat: repeat;
}

/*时间申请手风琴工作宽度
图像= 640px下的宽度
总图像= 5
因此在图像的宽度= 640px
不悬停时在图像宽度= 40px -自己可以设置
所以集装箱总宽度= 640 + 40 * 4 = 800px；
默认宽度= 800 / 5 = 160px；

*/

.accordian {
    width: 800px; height: 400px;
    overflow: hidden;

    /*Time for some styling*/
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
    width: 2000px;
    /*给最后一个项目提供空间，防止掉落*/
}

.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;

    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

    /*动画过度的时间*/
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;

}

/*不悬停时减少的*/
.accordian ul:hover li {width: 40px;}
/*允许使用悬浮效果*/
/*li覆盖在ul*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
    display: block;
    /*li标签分块*/
}

/*Image title styles*/
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0; bottom: 0;
    width: 640px;

}
.image_title a {
    display: block;
    color: lightpink;
    text-decoration: none;
    padding: 20px;
    font-size: 24px;
    font-family: 华文楷体;
}

html代码

    
    

        

            

                眼睛长在底迪身上系列
            
            
                
            
        
        

            

                彼此的依靠
            
            
                
            
        
        

            

                查呆萌和朱二狗
            
            
                
            
        
        

            

                执手难离
            
            
                
            
        
        

            

                “婚礼”
            
            
                
            
        
    

附四种添加音乐方法
html5方法一：不显示播放器。
html5方法二：会显示播放器。
方法三：支持所有播放器：我使用的此方法。
方法四：