<div class="container">
    <div class="profileCard">
      <div class="profileImage">
        <img src="https://i.pinimg.com/736x/29/4c/d9/294cd9e15f0d1c0711bc6526e8c44dc8--face-profile-face-reference.jpg">
        <div class="info">
          <div class="viewMore">
            <span class="name">John Doe</span>
            <button class="trigger">
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
          <span class="designation">UI Developer</span>
        </div>
      </div>
      <div class="profileInfo">
        <div class="name">John Doe</div>
        <div class="designation">UI Developer</div>
        <div class="description">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi exercitationem dicta porro aliquam suscipit nisi aperiam
          error temporibus id quia. Modi, ad amet. Quas neque molestias architecto debitis in. Ad.
        </div>
        <hr>
        <div class="follow">
          <span class="followers">2k</span>
          <span class="following">1402</span>
        </div>
        <button class="backBtn trigger">Back</button>
      </div>
    </div>
  </div>

@import url("https://fonts.googleapis.com/css?family=Poppins");
$fontFamily: "Poppins", sans-serif;

$black: #212121;
$white: #f1f1f1;
$time: 0.5s;
$timingFunction:ease-in-out;
body {
  font-family: $fontFamily;
  font-size: 71.42%;
  background-color: lighten($black, 90%);
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profileCard {
  height: 374px;
  width: 250px;
  border-radius: 4px;
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  background-color: $white;
}

/*profileImage*/

.profileCard {
  .profileImage {
    position: absolute;
    max-height: 100%;
    transform: translate(0, 0);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all $timingFunction $time;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: rgba($black, 0.2);
      z-index: 1;
      transition: all $timingFunction $time;
    }
    img {
      max-width: 100%;
      transition: all ease $time;
      border-radius:4px;
    }
    .info {
      position: absolute;
      bottom: 40px;
      left: 1rem;
      font-size: 1.5rem;
      color: $white;
      z-index: 2;
      display: flex;
      flex-direction: column;
      .viewMore {
        display: flex;
        justify-content: center;
        align-items: center;
        button {
          margin-left: 1rem;
          border-radius: 500px;
          height: 2rem;
          width: 2rem;
          background-color: rgba($black, 0.8);
          color: $white;
          border: none;
          outline: 0;
          i.fa {
            transition: all $timingFunction $time;
          }
          &:hover {
            cursor: pointer;
            i.fa {
              margin-left: 0.4rem;
            }
          }
        }
      }
      .designation {
        font-size: 0.8rem;
      }
    }
  }
}

/*ProfileCard Info*/

.profileCard {
  .profileInfo {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
    transform: translateY(150%);
    transition: all $timingFunction $time;
    .name {
      font-size: 1.6rem;
    }
    .designation {
      font-size: 1rem;
    }
    .description {
      font-size: 0.7rem;
      justify-content: center;
      display: flex;
      text-align: justify;
    }
    hr {
      width: 100%;
      margin: 0.2rem auto;
    }
    .follow {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 1.2rem;
      color: $black;
      margin-bottom: 0.2rem;
    }
    .backBtn {
      padding: 0.5rem 2rem;
      background-color: black;
      border: none;
      border-radius: 4px;
      color: $white;
      font-family: $fontFamily;
      outline: 0;
      font-size: 1rem;
      &:hover {
        cursor: pointer;
        background-color: lighten($black, 10%);
      }
    }
  }
}

.profileCard:hover {
  .profileImage {
    &::after {
      background-color: rgba($white, 0.1);
    }
  }
}

/*active states*/
.profileCard.active {
  .profileImage {
    transform: translate(-32%, -37%) scale(0.2);
    &::after,
    .info {
      visibility: hidden;
    }
  }
  .profileInfo {
    margin-top: 5.5rem;
    transform: translateY(0);
  }
}

$(document).ready(function() {
  $(".profileCard")
    .toArray()
    .forEach(function(card) {
      $(card)
        .find(".trigger")
        .on("click", function() {
          $(card).toggleClass("active");
        });
    });
});