<!-- ---------------- Created By InCoder ---------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Awesome Card - InCoder</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
  <div class="container">
    <div class="card">
      <div class="image">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEgmtXMEk-gs49oW4aYNTXXZ0UInZO526pqTlz2-4MGI6v6q0tLayJ1WXwc9WeEDQ70nzyMsLoZ6S_QbMa8krQaKx8Jq5VUh2vyK9bkYidm0OZtlQ1paibKf3sNX2BC9MPrP3ZyC2nSe1ACT_LSZVZjR57Ktq1nIPAXyvpuX3BZgjUC2SbHjkWqfpXvNjw=s320" alt="Image">
        <div><a href="#"><i class="fas fa-external-link-alt"></i></a></div>
      </div>
      <div class="details">
        <h2>Jhon Deo</h2>
        <p>Painter</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing sit amet consectetur adipisicing elit. Maiores
          earum ab nihil</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjn9z5bGp7OA11cHmGDUebrTBSoeYErshOI8EokqspntP4wnrnAbmgntF0BNlDqQgBspuPRVWTJr7egVAB6JcgOzQg2HypGrFB-Mos9S9LeQd3dGAff3dUiyshQ1hy-PprwbOi4zAE3Vjd-MbYxA2HuvLk697IcCY7F_Rc8gCKRDBkAtLGiDxb3Jc3zZA=s320" alt="Image">
        <div><a href="#"><i class="fas fa-external-link-alt"></i></a></div>
      </div>
      <div class="details">
        <h2>Emma Smith</h2>
        <p>Actor</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing sit amet consectetur adipisicing elit. Maiores
          earum ab nihil</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEggyuqtCUVd0BlNoXttq806m_FCP3VLMbqC3Zxcy7PsLSUUTC0q-8WQ2iOsTFQB5Y1UH3Tem4E0EDvAsOg8Z-Bxv_kYdPq_WcoqCgcyOkqo5kHe8Dp6G6KK3DOA5BdUlxjGSjajP6S96PgHmI9hP3F0N5B2vyvRfMx9vHln16QHJiaEn0MPiLBdMOd2Bw=s320" alt="Image">
        <div><a href="#"><i class="fas fa-external-link-alt"></i></a></div>
      </div>
      <div class="details">
        <h2>James Martin</h2>
        <p>Photographer</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing sit amet consectetur adipisicing elit. Maiores
          earum ab nihil</p>
      </div>
    </div>
  </div>
</body>

</html>
/* ---------------- Created By InCoder ---------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  place-items: center;
  justify-content: center;
  background-color: #e5e5e552;
}

.card {
  width: 18rem;
  display: grid;
  overflow: hidden;
  transition: 0.4s;
  margin: 10px 10px;
  position: relative;
  border-radius: 5px;
  place-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0.1rem rgb(0 0 0 / 8%);
}

.card:hover {
  transform: translate(0px, -10px);
  box-shadow: 0px 10px 10px 0.1rem rgb(0 0 0 / 15%);
}

.card h2 {
  letter-spacing: 1px;
}

.image {
  position: relative;
}

.image img {
  max-width: 20rem;
  max-height: 20rem;
}

.image div {
  top: 0;
  left: 0;
  opacity: 1;
  height: 97%;
  width: 100%;
  font-size: 2rem;
  position: absolute;
  border-radius: 0.5rem;
}

.image:hover div {
  opacity: 0.4;
  background-color: #202020;
}

.image:hover div a {
  display: block;
}

.image div a {
  top: 50%;
  left: 50%;
  opacity: 1;
  color: #fff;
  display: none;
  font-size: 3rem;
  cursor: pointer;
  position: absolute;
  transform: translate(-50%, -50%);
}

.details {
  max-width: 90%;
  text-align: center;
  padding: 0 0 10px 0;
}

.details p:last-child {
  color: #000c;
  padding: 0px 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.