html百叶窗效果,百叶窗效果展示.html

* {

margin: 0;

padding: 0;

}

body{

background-color: #cccccc;

background: url(img/triangles.png) repeat;

}

.container{

width: 805px;

height: 320px;

overflow: hidden;

margin: 100px auto;

-webkit-box-shadow: 0 0 5px #000;

}

.container li{

width:160px;

display: block;

position: relative;

float: left;

border-left: 1px solid #888;

-webkit-box-shadow: 0 0 25px #000;

-webkit-transition: all 0.5s;

}

.container ul:hover li {width: 40px;}

.container ul li:hover {width: 640px;}

.container li img {

display: block;

}

.image_title {

background: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0;

bottom: 0;

width: 640px;

}

.image_title a {

display: block;

color: #fff;

text-decoration: none;

padding: 20px;

font-size: 16px;

}

• KungFu Panda

  

• Toy Story 2

  

• Wall-E

  

• Up

  

• Cars 2

  

一键复制

编辑

Web IDE

原始数据

按行查看

历史