.demos {
  width: calc(100vw-360px);
  height: 100%;
  display: flex;
  .col {
    display: block;
    a {
      cursor: pointer;
      width: 100%;
      position: relative;
      display: block;
      background-color: #fff;

      &::after {
        content: '';
        display: block;
        clear: both;
      }
      .cover {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0px;
        z-index: 2;
      }
      .img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .title {
        background-color: rgba(132, 57, 238, 0.8);
        color: #fff;
        display: block;
        position: absolute;
        bottom: 0px;
        z-index: 10;
        width: 100%;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        padding: 6px 8px;
        height: 30px;
        opacity: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      &:hover {
        .cover {
          animation: slidOut 1.4s;
          -webkit-animation: slidOut 1.4s;
          animation-fill-mode: forwards;
        }
        .title {
          animation: showUp 0.5s;
          -webkit-animation: showUp 0.3s;
          animation-fill-mode: forwards;
        }
      }
    }
  }
}

@keyframes showUp {
  0% {
    opacity: 0;
    bottom: -30px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}

@keyframes slidOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
