Untitled

<ul class="box">

  <li>Label one<div class="title">title one</div>

  </li>

  <li>Label two<div class="title">title one</div></li>

  <li>Label three<div class="title">title one</div></li>

  <li>Label four<div class="title">title one</div></li>

  <li>Label five<div class="title">title one</div></li>

  <li>Label six<div class="title">title one</div></li>

</ul>

 .box {

  position: relative;

  z-index: 1;

  width: 990px;

  list-style: none;

  margin: 10px auto ;

  padding: 0;

  overflow: hidden;

}

.box li {

  position: relative;

  float: left;

  margin: 0 30px 30px 20px;

  padding: 0;

  width: 250px;

  height: 150px;

  line-height: 150px;

  background: #fff;

  border: 1px solid #efefef;

  -webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.06), 0 1px 4px rgba(0, 0, 0, .27);

  -moz-box-shadow: inset 0 0 40px rgba(0,0,0,0.06), 0 1px 4px rgba(0, 0, 0, .27);

  box-shadow: inset 0 0 40px rgba(0,0,0,0.06), 0 1px 4px rgba(0, 0, 0, .27);

  text-align: center;

  overflow: hidden;

}

.box li:before, .box li:after {

  content: '';

  position: absolute;

  left: 10px;

  bottom: 10px;

  z-index: -1;

  width: 70%;

  height: 55%;

  max-width: 300px;

  max-height: 100px;

  -webkit-box-shadow: 0 8px 16px rgba(0, 0,0, .3);

  -moz-box-shadow: 0 8px 16px rgba(0, 0,0, .3);

  box-shadow: 0 8px 16px rgba(0, 0,0, .3);

  -webkit-transform: skew(-15deg) rotate(-6deg);

  -moz-transform: skew(-15deg) rotate(-6deg);

  -ms-transform: skew(-15deg) rotate(-6deg);

  -o-transform: skew(-15deg) rotate(-6deg);

  transform: skew(-15deg) rotate(-6deg);

}

.box li:after {

  right: 10px;

  left: auto;

  -webkit-transform: skew(15deg) rotate(6deg);

  -moz-transform: skew(15deg) rotate(6deg);;

  -ms-transform: skew(15deg) rotate(6deg);;

  -o-transform: skew(15deg) rotate(6deg);;

  transform: skew(15deg) rotate(6deg);;

}

.title  {

  position: absolute;

  z-index: 2;

/*   display: none; */

  left: 0;

  bottom: -25px;

  width: 100%;

  height: 25px;

  line-height: 25px;

  background: rgba(0, 0, 0, .3);

  -webkit-transition: all 0.2s ease-in;

  -moz-transition: prop time;

  -ms-transition: prop time;

  -o-transition: prop time;

  transition: prop time;

}

(function() {

  var uls = document.getElementsByClassName("box");

  for (var i = 0; i < uls.length; i++) {

    var lis = uls[i].getElementsByTagName("li");

    for (var j = 0; j < lis.length; j++) {

      lis[j].onmouseover = function() {

<!--         this.style.backgroundColor = "#ff9800"; -->

        this.getElementsByTagName("div")[0].style.bottom = "0";

      };

      lis[j].onmouseout = function() {

        this.style.backgroundColor = "#fff";

         this.getElementsByTagName("div")[0].style.bottom = "-25px";

      };

    }

  }

})();