<body>
  <div class="card">
    <div class="card_image">
      <img src="https://images.unsplash.com/photo-1522556189639-b150ed9c4330?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjB8fHBlb3BsZXxlbnwwfDF8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
    </div>
    <div class="content">
      <h3>Nikhil Bobade</h3>
      <p>Frontend Developer</p>
    </div>
  </div>
</body>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    background: linear-gradient(to left, #92FE9D, #00C9FF);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    user-select: none;
}

.card {
    margin: 50px 0;
    width: 300px;
    height: 350px;
}

.card .card_image {
    transition: 0.5s all ease-in-out;
    position: relative;
    background: #7844E9;
    z-index: 1;
    transform: translateY(100px);
}

.card:hover .card_image {
    transform: translateY(0px);
}

.card img {
    width: 300px;
    background-size: cover;
    height: 100%;
    opacity: 0.8;
}

.card .content img:hover {
    opacity: 0.5;
}

.card .content {
    transition: 0.5s all ease-in-out;
    height: 100px;
    position: relative;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.card:hover .content {
    transform: translateY(0);
}

.card .content p {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #414141;
}

.card .content h3 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #fff;
    font-size: 24px;
    text-align: center;
    color: #414141;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.