YPNrJp

index.jade

div.box
  div.control
    div.big-love 推荐
    div.big-switch 开关
    div.big-delete 删除
  div.title
    div.txt 这里是标题
    div.love
    div.deng 

style.scss

@import "compass/css3";
.box {
  width: 210px;
  height: 180px;
  background: red;
  position: relative;
  margin-top: 200px;
  overflow: hidden;
  
  &:hover {
    .title {
      bottom: -50px;
    }
    
    .control {
      top: 0px;
    }
  }
  
  .title {
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    transition: all .5s ease;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    
    .txt {
      margin: 10px;
    }
  }
  
  .control {
    transition: all .5s ease;
    position: absolute;
    color: #FFFFFF;
    top: -140px;
    height: 140px;    
    div {
      height: 100%;
      width: 70px;      
      float: left;
      text-align: center;
      background: rgba(0, 0, 0, 0.6);
    }
    .big-love {
    }
    .big-switch {
    }
    .big-delete {
    }
  }
}

YPNrJp.markdown

YPNrJp

A Pen by limichange on CodePen.

License.