CodePen Embed - Simple CSS Profile Card Hvr Fx

<body>
  <div class="container">

    <div class="cards">
      <div class="imgBx">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAKPtCXq1-IqmuECPSq0dISXEdoz1z-Fps0IWn01Lj-hem-NsLoXWcSPSJiRdxWX2DM_w&usqp=CAU" alt="">
      </div>
      <div class="content">
        <div class="details">
          <h2>Frida Kahlo<br><span>Senior Designer</span></h2>
          <ul class="social_icons">
            <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
            <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
            <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href=""><i class="fa-brands fa-youtube"></i></a></li>

          </ul>
        </div>
      </div>
    </div>

    <div class="cards">
      <div class="imgBx">
        <img src="data:image/jpeg;base64,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" alt="">
      </div>
      <div class="content">
        <div class="details">
          <h2>Norman Osgood<br><span>Senior Designer</span></h2>
          <ul class="social_icons">
            <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
            <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
            <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href=""><i class="fa-brands fa-youtube"></i></a></li>

          </ul>
        </div>
      </div>
    </div>

    <div class="cards">
      <div class="imgBx">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT57yQ7n785AIejIerLH_2B6lRe6Rg4gb1Le5AvqFFy_4yuwexLtszvLE_PFVyn-64QGu0&usqp=CAU" alt="">
      </div>
      <div class="content">
        <div class="details">
          <h2>Fredika Bromley<br><span>Senior Designer</span></h2>
          <ul class="social_icons">
            <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
            <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
            <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href=""><i class="fa-brands fa-youtube"></i></a></li>

          </ul>
        </div>
      </div>
    </div>

    <div class="cards">
      <div class="imgBx">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7W_KeHKyqSqswYFknE7G5-2_JDYl0Jl7WtkItH9whLBDqXBjyqKDhOkMnFocK54RtGNo&usqp=CAU" alt="">
      </div>
      <div class="content">
        <div class="details">
          <h2>Natasha Minklestein<br><span>Senior Designer</span></h2>
          <ul class="social_icons">
            <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
            <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
            <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href=""><i class="fa-brands fa-youtube"></i></a></li>

          </ul>
        </div>
      </div>
    </div>

  </div>
  <script src="https://kit.fontawesome.com/24474e4559.js" crossorigin="anonymous"></script>
</body>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  border-radius: 20px;
}
.container {
  position: relative;
  width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.container .cards {
  position: relative;
  width: 300px;
  height: 400px;
  background: linear-gradient(#2196f3, #2196f3 30%, #1d3548 30%, #1d3548);
  margin: 10px;
  border-radius: 20px;
  overflow: hidden;
}
.container .cards .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  z-index: 100000;
  transform-origin: top;
}
.container .cards:hover .imgBx {
  transform: translateY(30px) scale(0.5);
}
.container .cards .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container .cards .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 30px;
  transform: translateY(100%);
  transition: 0.5s;
}
.container .cards:hover .content {
  transform: translateY(0);
}
.container .cards .content .details h2 {
  color: #fff;
  font-size: 1.5em;
  font-weight: 500;
}
.container .cards .content .details h2 span {
  font-size: 0.8em;
  font-weight: 400;
  color: #03a9f4;
}
.social_icons {
  position: relative;
  display: flex;
  margin-top: 5px;
}
.social_icons li {
  list-style: none;
  margin: 4px;
}
.social_icons li a {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.5em;
  color: #fff;
  text-decoration: none;
  transition: 0.5s;
}
.social_icons li a:hover {
  transform: rotate(360deg);
  background: #03a9f4;
}

This Pen is owned by Sergio Alcantar on CodePen.

See more by @mycodepenusername on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.