<div class="image_container">
      <img src="https://res.cloudinary.com/djix6uusx/image/upload/v1659354179/humming_bird_bzcaf5.jpg" />
      <span class="title">Humming Bird</span>
      <span class="description"
        >They are the only birds that can fly backwards and are capable of
        hovering for a period of time during flight.</span
      >
      <span class="line top"></span>
      <span class="line left"></span>
    </div>
   *,
      :before,
      :after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .image_container {
        position: relative;
        width: 95%;
        max-width: 500px;
        height: min(70vw, 300px);
        cursor: pointer;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .image_container:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: hsl(271, 76%, 53%);
        transform: scale(0);
        transition: all 800ms linear;
        transform-origin: 0 50%;
        z-index: 2;
        opacity: 0.3;
      }

      .image_container:hover:before {
        transform: scale(1);
      }

      span {
        position: absolute;
        color: #fff;
        opacity: 0;
        transition: all 800ms linear;
        z-index: 3;
      }

      .title {
        font-size: 2rem;
        left: 25%;
        top: 50%;
      }

      .description {
        font-size: 1rem;
        left: 25%;
        top: 65%;
        width: 50%;
      }

      .image_container:hover span {
        opacity: 1;
      }

      .line {
        left: 0;
        top: 0;
        position: absolute;
        background: #fff;
        transition: all 800ms linear;
      }

      .top {
        width: 3px;
        height: 0;
        left: 20%;
      }

      .image_container:hover .top {
        height: 100%;
      }

      .left {
        width: 0;
        height: 3px;
        top: 95%;
      }

      .image_container:hover .left {
        width: 100%;
      }

      @media (max-width: 424px) {
        .title {
          font-size: 1.5rem;
          left: 25%;
          top: 50%;
        }

        .description {
          font-size: 0.8rem;
          left: 25%;
          top: 65%;
          width: 50%;
        }
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.