.hi-container {
          position: relative;
          width: 290px;
          margin: 0px auto;
        }
        .hi-container a {
          text-decoration: none;
          color: #000;
        }
        .hi-container a figure {
          margin: 0;
        }
        .hi-container a figure div.hi-top {
          position: relative;
          overflow: hidden;
          height: 200px;
          width: 260px;
        }
        .hi-container a figure div.hi-top img {
          display: block;
          position: absolute;
          width: 265px;
          top: 0;
          transition: 0.3s;
          z-index: 2;
        }
        .hi-container a figure div.hi-top .hi-top-content {
          padding: 0px 20px;
          display: block;
          overflow: hidden;
          height: 200px;
          position: absolute;
          top: -100%;
          transition: 0.3s;
          z-index: 0;
        }
        .hi-container a figure div.hi-top:after {
          display: block;
          z-index: 1;
          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
          width: 100%;
          height: 50px;
          position: absolute;
          bottom: 0px;
          content: '';
        }
        .hi-container a figure div.hi-bottom {
          position: relative;
          overflow: hidden;
          height: 50px;
          width: 265px;
        }
        .hi-container a figure div.hi-bottom figcaption {
          text-align: center;
          font-weight: bold;
          display: block;
          width: 100%;
          position: absolute;
          transition: 0.3s;
          background: #fff;
          height: 45px;
          padding-top: 5px;
        }
        .hi-container a figure div.hi-bottom figcaption small {
          font-weight: normal;
          display: block;
        }
        .hi-container a figure div.hi-bottom .hi-bottom-content {
          padding: 0px 2px;
          display: block;
          overflow: hidden;
          height: 50px;
          position: absolute;
          bottom: -50px;
          transition: 0.3s;
        }
        .hi-container a figure div.hi-bottom .hi-bottom-content button {
          height: 30px;
          border: 1px solid #EF4343;
          background: #dd0000;
          color: #fff;
          border-radius: 1px;
          margin: 5px 0px 0px 0px;
        }
        .hi-container:hover figure div.hi-top img {
          top: 100%;
          transition: 0.3s;
        }
        .hi-container:hover figure div.hi-top .hi-top-content {
          top: 0;
          transition: 0.3s;
          transition-delay: 0.15s;
        }
        .hi-container:hover figure div.hi-bottom figcaption {
          bottom: 100%;
          transform: translateY(0%);
          transition: 0.3s;
        }
        .hi-container:hover figure div.hi-bottom .hi-bottom-content {
          bottom: 0px;
          transition: 0.3s;
          transition-delay: 0.15s;
        }