*{ margin:0; padding:0; list-style:none;}
.bg{ position:absolute; top:0; left:0; right:0; bottom:0; width:765px; height:620px; padding:0 5px 5px 0; border:#CCC 5px solid; margin:auto; overflow:hidden}
.bg li{ height:150px; margin:5px 0 0 5px; float:left; width:100px; overflow:hidden; position:relative;cursor:pointer;}
.bg li img{ position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; width:100%;}
.bg li:nth-child(1){ width:300px;}
.bg li:nth-child(2){ width:200px;}
.bg li:nth-child(3){ width:250px;}
.bg li:nth-child(4){ width:450px;}
.bg li:nth-child(5){ width:305px;}
.bg li:nth-child(6){ width:150px;}
.bg li:nth-child(7){ width:200px;}
.bg li:nth-child(8){ width:400px;}
.bg li:nth-child(9){ width:250px;}
.bg li:nth-child(10){ width:250px;}
.bg li:nth-child(11){ width:250px;}
.mask{ position:absolute;background: rgba(0, 0, 0,0.5);-webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; margin-top:5px; margin-left:5px; color:#FFF; text-align:center; line-height:150px; font-size:55px;cursor:pointer; }