Bootstrap 4

    <link

      rel="stylesheet"

      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"

      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"

      crossorigin="anonymous"

    />

​

  <div class="main-container d-flex justify-content-center align-items-center vh-100">

    <div class="container-fluid pt-5">

      <div class="card">

        <div class="image-container">

          <img

            src="https://images.unsplash.com/photo-1602740337312-e28c0b7d27f9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8a2FyYWNoaXxlbnwwfHwwfHx8MA%3D%3D"

            class="card-img-top cover-image"

            alt="cover-image"

          />

        </div>

​

        <div class="card-body">

          <div class="content">

            <h3 class="main-title">Karachi City</h3>

            <p class="card-text mt-2 text-center">

              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, nemo

              deserunt tempore, vel neque necessitatibus recusandae animi est

              cum sunta.

            </p>

          </div>

        </div>

        <!-- .card-body -->

      </div>

      <!-- .card -->

    </div>

</div>

    <script

      src="https://kit.fontawesome.com/d91ebf4c9d.js"

      crossorigin="anonymous"

    ></script>

    <script

      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"

      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

      crossorigin="anonymous"

    ></script>

    <script

      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"

      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"

      crossorigin="anonymous"

    ></script>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

​

      .main-container {

        margin: 0;

        padding: 0;

        font-family: "Poppins", sans-serif;

      }

​

      .card {

        max-width: 300px;

        height: 215px;

        margin: auto;

        padding: 20px 15px;

        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);

        transition: 0.3s ease-in-out;

      }

​

      .card:hover {

        height: 450px;

        box-shadow: 0 0 45px gray;

      }

​

      .image-container {

        position: relative;

        width: 250px;

        height: 250px;

        top: -50px;

        left: 10px;

        z-index: 1;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

      }

​

      .image-container .cover-image {

        max-width: 100%;

        border-radius: 4px;

      }

​

      .main-title {

        font-size: 20px;

        font-weight: bold;

      }

​

      .content {

        position: relative;

        margin-top: -140px;

        padding: 10px 15px;

        text-align: center;

        color: #111;

        visibility: hidden;

        opacity: 0;

        pointer-events: none;

        transition: 0.4s;

      }

​

      .card:hover .content {

        visibility: visible;

        opacity: 1;

        margin-top: -60px;

        transition-delay: 0.3s;

      }