<div class="container">
  <div class="card-wrapper">
    <div class="card-container">
      <div class="card-header">
        <img src="https://images.unsplash.com/photo-1542345812-d98b5cd6cf98?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Face Image">
      </div>
      <div class="card-footer">
      </div>
      <div class="card-footer-title">
          <span class="roboto-bold">
               Saeed Hassanvand
              </span>
      </div>
    </div>
    <div class="card-hover-content-container">
      <div class="card-menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
      <div class="card-hover-content">
        <a href="https://codepen.io/Hassanvand">
                <img src="https://image.flaticon.com/icons/svg/145/145812.svg" alt="tiwtter">
              </a>
        <a href="https://codepen.io/Hassanvand">
                <img src="https://image.flaticon.com/icons/svg/145/145808.svg" alt="pinterest">
              </a>
        <a href="https://codepen.io/Hassanvand">
                <img src="https://image.flaticon.com/icons/svg/145/145802.svg" alt="facebook"/>
              </a>
      </div>
    </div>
  </div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.card-wrapper {
  background-color: #343741;
  height: 500px;
  width: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 0 0;
  transform: scale(0.95);
  transition: transform 0.5s, background-color 0.5s, box-shadow 0.5s;
}

.card-wrapper:hover {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
}

.card-container {
  width: 100%;
  height: 100%;
}

.card-header {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0
}

.card-header img {
  max-width: 100%;
  height: 100%;
  transition: all 0.5s;
}

.card-wrapper:hover .card-header img {
  transform: scale(1.2) rotate(3deg);
}

.card-footer {
  height: 15%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  transition: color 500ms;
  color: white;
  background-color: #1d1e24;
  opacity: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-footer-title span {
  font-family: Oswald;
  font-size: 24px;
  position: absolute;
  left: 25%;
  bottom: 25px;
  color: white;
  font-weight: bold;
  text-shadow: 0 0 1px white;
}

.card-hover-content-container {
  background-color: #1d1e24;
  width: 140px;
  height: 140px;
  position: absolute;
  top: -60px;
  right: -60px;
  border-radius: 0px 0px 100px 100px;
  transition: all 0.2s, border-radius 1s, top 1s;
  overflow: hidden;
  color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0.7;
}

.card-hover-content-container:hover {
  border-radius: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 85%;
  opacity: 0.5;
}

.card-menu-icon {
  position: absolute;
  right: 80px;
  top: 85px;
  color: white;
  opacity: 1;
  font-size: 20px;
}

.bar {
  width: 25px; 
  height:2px; 
  background-color: white; 
  margin: 3px
}

.card-hover-content-container:hover .card-menu-icon {
  opacity: 0;
  right: 15px;
  top: 15px;
}

.card-hover-content-container:hover .card-hover-content {
  opacity: 1;
  transform: scale(1);
  transform: translateY(0);
}

.card-hover-content {
  width: 100%;
  text-align: center;
  padding: 5%;
  opacity: 0;
  transform: scale(0.5);
  transform: translateY(-200%);
  transition: opacity 0.2s, transform 0.8s;
}

.card-hover-content a {
  border-radius: 100%;
  border: 0;
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #343741;
  color: white;
  margin: 5px;
  transition: all 0.5s;
}

.card-hover-content a:hover {
  transform: scale(1.2);
}

External CSS

  1. https://fonts.googleapis.com/css?family=Oswald&amp;display=swap"rel="stylesheet
  2. https://static.fontawesome.com/css/fontawesome-app.css

External JavaScript

This Pen doesn't use any external JavaScript resources.