<div id="home_gallery">
  <ul id="drag_div" class="active">
    <li class="active">
      <div class="image"></div>
      <a href="http://www.wikiwand.com/en/Ocean" target="_blank" class="no_hovercard">
        <span class="ng-binding">
            Ocean
            <svg version="1.1" width="30px" height="15px">
              <line fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" x1="3" y1="7.5" x2="26" y2="7.5"></line>
              <g class="late_line">
                <line fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" x1="26.487" y1="7.402" x2="20.207" y2="1.797"></line>
                <line fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" x1="26.488" y1="7.402" x2="20.208" y2="13.254"></line>
              </g>
            </svg>
          </span>
        <i>Read this article on Wikiwand</i>
      </a>
    </li>
  </ul>
</div>
//colors
$white: #fff;
$color_bon_jour_approx: #e1e1e1;
$black: #000;

//fonts
$font: Tahoma, serif;

%extend_1 {
  display: block;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  outline: 0;
  color: #1559b5;
  position: relative;
  transition: color .15s ease-out;
}

#home_gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: $white;
  height: 600px;
  ul {
    position: relative;
    opacity: 0;
    transition: all .7s cubic-bezier(0.6, .1, .3, .8);
    transform: translateY(50px);
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    &.active {
      transform: translateY(0);
      opacity: 1;
    }
    li {
      width: 300px;
      height: 50%;
      position: relative;
      overflow: hidden;
      user-select: none;
      &.active {
        animation: plainScale .7s cubic-bezier(0.6, .1, .3, .8);
      }
      .image {
        background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/500px-Clouds_over_the_Atlantic_Ocean.jpg);
      }
      a {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-family: $font;
        transform: translateY(100%);
        transition: all .3s cubic-bezier(0.6,.1,.3,.8);
        padding: 10px;
        line-height: 1.4;
        user-select: none;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: -10%;
          width: 120%;
          height: 150%;
          outline: 1px solid transparent;
          transition: all .3s cubic-bezier(0.6,.1,.3,.8);
          background-color: $white;
        }
        &:hover:before {
          transform: rotate(10deg)!important;
        }
        svg {
          display: inline-block;
          vertical-align: middle;
        }
        line {
          transition: all .1s cubic-bezier(0.6,.1,.3,.8) .2s;
          stroke-dashoffset: 30;
          stroke-dasharray: 30;
        }
        .late_line line {
          transition: all .2s cubic-bezier(0.6,.1,.3,.8);
        }
        i {
          @extend %extend_1;
          color: rgba(0,0,0,.5);
          font-size: 14px;
          transition: all .3s cubic-bezier(0.6,.1,.3,.8) .3s;
        }
        span {
          @extend %extend_1;
          color: $black;
          font-size: 22px;
          transition: all .3s cubic-bezier(0.6,.1,.3,.8) .2s;
        }
      }
      &:hover a {
        transform: translateY(0%);
        &:before {
          top: -10%;
          transform: rotate(7deg);
        }
        line {
          transition: all .3s cubic-bezier(0.6,.1,.3,.8) .3s;
          stroke-dashoffset: 0;
        }
        .late_line line {
          transition: all .3s cubic-bezier(0.6,.1,.3,.8) .5s;
        }
        i {
          opacity: 1;
          transform: translateY(0);
        }
        span {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
    li>div {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $color_bon_jour_approx;
      background-size: cover;
      background-position: 50% 20%;
      background-repeat: no-repeat;
      transition: all 2s ease-out;
    }
  }
  li:hover>div {
    transform: scale(1.1);
  }
}


@-webkit-keyframes plainScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes plainScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes plainScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes plainScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes plainScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.