<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet" />
<div class="wrap">
  <div class="card">
    <div class="card__image">

      <div class="card__social">
        <a href="javascript:void(0)"><img class="card__social__icons" src="https://image.flaticon.com/icons/svg/1312/1312139.svg" /></a>
        <a href="javascript:void(0)"><img class="card__social__icons" src="https://image.flaticon.com/icons/svg/1409/1409937.svg" /></a>
        <a href="javascript:void(0)"><img class="card__social__icons" src="https://image.flaticon.com/icons/svg/1409/1409946.svg" /></a>
        <a href="javascript:void(0)"><img class="card__social__icons" src="https://image.flaticon.com/icons/svg/25/25231.svg" /></a>
        <a href="javascript:void(0)"><img class="card__social__icons" src="https://image.flaticon.com/icons/svg/1384/1384014.svg" /></a>
      </div>
    </div>
    <div class="card__content">
      <h1 class="card__name">John Doe</h1>
      <h2 class="card__title">Frontend Developer</h2>
      <p class="card__description">Worked on technologies like this, that, those, these and whatever.
    </div>
  </div>
</div>
</div>

* {
  font-family: "Fjalla One", sans-serif;
}
.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 20px;
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 5px 27px 10px -27px #000;
}
.card__image {
  position: absolute;
  background-image: url("https://cdn.pixabay.com/photo/2017/08/30/12/45/girl-2696947_960_720.jpg");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  clip-path: circle(20% at 49% 25%);
  transition: clip-path 0.5s ease-in;
}
.card__description {
  font-family: "sans-serif";
  font-size: 0.85em;
}
.card__content {
  font-size: 1em;
  padding: 10px;
  position: relative;
  top: 50%;
  transition: opacity 0.25s ease-in;
  text-align: center;
  color: #ebedee;
}
.card__name {
  color: black;
  margin: 0;
  text-transform: uppercase;
}
.card__social {
  opacity: 0;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px -3px 5px 1px #ccc;
  transition: all 0.5s ease-in;
}
.card__social * {
  margin: 0 2px;
}
.card__social__icons {
  width: 30px;
  height: 30px;
}
.card__title {
  font-size: 1em;
  letter-spacing: 1px;
  font-weight: 300;
  color: white;
}
.card:hover .card__image {
  clip-path: circle(145% at 49% 25%);
}
.card:hover .card__content {
  opacity: 0;
}
.card:hover .card__social {
  opacity: 1;
  top: -7%;
}