<figure>
  <div class="img"></div>
  
  <figcaption>
    <span>The</span>
    <span>Caucasian Shepherd </span>
    <span>is a large breed of dog that is popular in Russia, Armenia, Azerbaijan, and Mexico. It is extremely popular in Georgia, which has always been the principal region of penetration of Caucasian shepherd dogs.</span>
  </figcaption>
  
  <button></button>
</figure>

$blue: #2c3e50;
$grey: #ecf0f1;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transition: 1s cubic-bezier(.59,-0.43,.17,1.16);
}

// basic styling
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  perspective: 800px;
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}

figure {
  width: 350px;
  box-shadow: 3px 3px 40px 0 rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  position: relative;
  pointer-events: none;
  background: #ecf0f1;
  transition: 0.3s ease-in-out;

  .img {
    width: 100%;
    height: 200px;
    border-radius: 8px 8px 0 0;
    background: url("https://animalso.com/wp-content/uploads/2018/04/caucasian-mountain-shepherd-4-809x508.jpg");
    background-size: 350px auto;
    background-repeat: no-repeat;
    
    &:after{
      content:"";
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:150px;
      background:linear-gradient(transparent, #ecf0f1 44%);
      border-radius:0 0 8px 8px;
    }
  }

  figcaption {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    overflow: visible;
    background: $grey;
    border-radius: 0 0 8px 8px;
    // max-height: 280px;

    span {
      width: 100%;

      &:nth-child(1) { // The
        position: absolute;
        font-family: "Pacifico", cursive;
        font-size: 30px;
        top: 0;
        opacity: 0;
        left: 0;
        color: $blue;
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
      }
      &:nth-child(2) { // Caucasian Shepherd
        font-family: "Pacifico", cursive;
        font-size: 52px;
        overflow: visible;
        position: absolute;
        top: -42px;
        left: -48px;
        white-space: nowrap;
        color: $blue;
        z-index: 10;
        transform: rotate(-2deg);
        text-shadow: 0 0 50px rgba(#fff, 0.2);
        transition: top 0.3s ease-in-out;
      }
      &:nth-child(3) { // text
        opacity: 0;
        padding: 0 20px;
        height: 20px;
        overflow: hidden;
        cursor: text;
      }
    }
  }

  button {
    position: absolute;
    bottom: -10px;
    width: 130px;
    left: calc(50% - 65px);
    background: $blue;
    color: #fff;
    border: 0;
    height: 35px;
    border-radius: 4px;
    transform: rotate(1deg);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    z-index:20;

    &:focus {
      outline: 0;
    }

    &:before {
      content: "more";
      position: absolute;
      top: 8px;
      left: 44px;
      opacity: 1;
      transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
    }
    &:after {
      content: "back";
      opacity: 0;
      top: 8px;
      left: 0;
      position: absolute;
      transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
    }
  }

  // hover effect
  &:hover {
    transition: 0.3s ease-in-out;
    transform: rotateX(-2deg);
    box-shadow: 3px -3px 40px 0 rgba(0, 0, 0, 0.4);

    button {
      background: #4f6780;
      bottom: -13px;
      transition: 0.3s ease-in-out;
    }
    span:nth-child(2) {
      top: -39px;
      transition: top 0.3s ease-in-out;
    }
  }

  // when open
  &.open {
    .img {
      height: 0;
    }
    figcaption {
      height: 280px;
      border-radius: 8px;

      span {
        &:nth-child(1) {
          top: -25px;
          opacity: 1;
        }
        &:nth-child(2) {
          top: -18px;
        }
        &:nth-child(3) {
          height: 100%;
          opacity: 1;
          padding: 80px 20px 40px 20px;
        }
      }
    }
    button {
      &:before {
        opacity: 0;
        left: 100%;
      }
      &:after {
        opacity: 1;
        left: 47px;
      }
    }

    // when open and hover
    &:hover {
      figcaption {
        span:nth-child(2) {
          top: -15px;
          transition: top 0.3s ease-in-out;
        }
      }
    }
  }
}

$("button").click(function() {
  $("figure").toggleClass("open");
});