.hover-box {
      position: relative;
      width: 100%;   /* adjust as needed */
      border-radius: 15px;
      overflow: hidden;
      cursor: pointer;
      margin-top: 50px;
    }

    .hover-box img {
      width: 100%;
      height: auto;
      border-radius: 15px;
      display: block;
    }

    /* Overlay from corners */
    .hover-box::before,
    .hover-box::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.048); /* white overlay */
      transition: all 0.5s ease;
      z-index: 2;
    }

    /* Top-left corner */
    .hover-box::before {
      top: 0;
      left: 0;
      border-radius: 15px 0 0 0;
    }

    /* Bottom-right corner */
    .hover-box::after {
      bottom: 0;
      right: 0;
      border-radius: 0 0 15px 0;
    }

    /* Hover expands from corners */
    .hover-box:hover::before,
    .hover-box:hover::after {
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }