<div class="container">
      <div class="box1 box">
        <a href="https://google.com">
          <div class="img-container img-container1"></div>
          <div class="text-area1 text-area">
            <h1 class="text-head text-head1">
              Lorem ipsum, dolor sit amet consec adipisicing elit. Recusandae.
            </h1>
            <p class="text-discription">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid
              nam tempora facilis perspiciatis hic quo recusandae ex aliquam
              autem excepturi!
            </p>
          </div>
        </a>
      </div>
      <div class="container_child">
        <div class="box2 box">
          <a href="https://instagram.com">
            <div class="img-container img-container2"></div>
            <div class="text-area2 text-area">
              <h1 class="text-head text-head2">
                Lorem ipsum, dolor sit amet consec adipisicing elit. Recusandae.
              </h1>
              <p class="text-discription2">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Aliquid nam tempora facilis perspiciatis hic quo recusandae ex
                aliquam autem excepturi!
              </p>
            </div>
          </a>
        </div>
        <div class="box3 box">
          <a href="https://linkedin.com">
            <div class="img-container img-container3"></div>
            <div class="text-area3 text-area">
              <h1 class="text-head2 text-head">
                Lorem ipsum, dolor sit amet consec adipisicing elit. Recusandae.
              </h1>
              <p class="text-discription2">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Aliquid nam tempora facilis perspiciatis hic quo recusandae ex
                aliquam autem excepturi!
              </p>
            </div>
          </a>
        </div>
      </div>
    </div>
@import url("https://fonts.googleapis.com/css2?family=Bellota+Text:wght@300;400;700&family=Bree+Serif&family=Monoton&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 62.5%;
        font-family: "Bree Serif", serif;
      }

      .container {
        display: flex;
        flex-direction: row;
        width: 80%;
        height: 80vh;
        margin: auto;
        margin-top: 3rem;
      }
      .box {
        margin: .5rem;
        border-radius: 2rem;
        overflow: hidden;
        box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.647);
        transition: box-shadow 2s;
      }

      .box:hover {
        box-shadow: .8rem .8rem .5rem rgba(0, 0, 0, 0.497);
        transition: box-shadow 1s;
      }
        .box1 {
            width: 50%;
        }

        .container_child {
            width: 50%;
            display: flex;
            flex-direction: column;
        }
        .box2 {
            height: 50%;
        }
        .box3 {
            height: 50%;
        }

      .box a {
        position: relative;
      }

      .img-container {
        height: 100%;
        width: 100%;
        position: relative;
        opacity: 0.9;
        transition: all 1.2s;
      }

      .img-container1 {
        background: linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.292),
            rgba(0, 0, 0, 0.474)
          ),
          url(https://source.unsplash.com/random);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .img-container2 {
        background: linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.292),
            rgba(0, 0, 0, 0.474)
          ),
          url(https://source.unsplash.com/random);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .img-container3 {
        background: linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.292),
            rgba(0, 0, 0, 0.474)
          ),
          url(https://source.unsplash.com/random);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .text-head {
          display: inline;
          background-image: linear-gradient(white, white);
          background-repeat: no-repeat;
          background-size: 0% .5px;
          background-position: bottom left;
          transition: background-size 400ms;
          z-index: 10;
        }
        
        .text-head1 {
            font-size: .9rem;
            font-weight: 500;
        }
        .text-head2 {
            font-size: .8rem;
            font-weight: 500;
        }
        
        .hover {
          transform: scale(1.2);
          transition: all 2s;
        }
        .active {
        background-size: 100% 2px;
        transition: background-size 1s;
        }
      .text-area {
        position: absolute;
        bottom: 20%;
        padding: 0 1.5rem;
        color: white;
      }
      .text-discription {
        font-size: .3rem;
        font-weight: 400;
        margin-top: 0.5rem;
      }
      .text-discription2 {
        font-size: .3rem;
        font-weight: 400;
        margin-top: 0.5rem;
      }
const link = document.querySelectorAll(".box a");
      link.forEach((input) => {
        input.addEventListener("mouseover", addtheclass);
        input.addEventListener("mouseout", removeclass);
      });

      function addtheclass(input) {
        const img = this.querySelector(".img-container");
        img.classList.add("hover");
        console.log(img);
        const line = this.querySelector(".text-head");
        line.classList.add("active");
        console.log(line);
      }
      function removeclass(input) {
        const img = this.querySelector(".img-container");
        img.classList.remove("hover");
        console.log(img);
        const line = this.querySelector(".text-head");
        line.classList.remove("active");
        console.log(line);
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.