*, *:after, *:before {padding:0;margin:0;font-family:Arial;}.ulclass {position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;list-style:none;width:955px;height:450px;border-radius:3px;overflow:hidden;box-shadow:1px 1px 3px 1px;}.liclass {position:relative;width:190px;height:450px;float:left;border-left:1px solid white;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;transition:all 0.7s;box-shadow:-2px 0 10px 2px;}.ulclass .liclass:first-child {border:none;}.spanclass {display:block;position:absolute;bottom:0;width:50%;color:white;white-space:nowrap;padding:20px;background: -moz-linear-gradient(left,rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to right,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); }.imgclass {width:800px;height:450px;}.ulclass:hover .liclass {width:50px;}.ulclass .liclass:hover {width:750px;}