Check if element is at least half in viewport

I have 4 cards that contain images. When the image is in viewport I want the image to come from the left. I have finished all the css but when I run the JS, it always returns false even if the element is in viewport. I don’t need the whole image to be in the viewport at least half of it and I want it to return true. I have a for each loop that runs through all of the images but it always returns false.

This is the code that I have come up with:

function isInViewport(container) {
  const rect = container.getBoundingClientRect();
  
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

this is the html:

      <div class="col-md-6 col-sm-12 p-0 overflow-hidden bg-dark imageCard">
        <div class="imageCont">
          <img
            src="images/ferrariPhoto1.webp"
            alt=""
            style="width: 100%; height: 100%"
            class="ferrariImageSection"
          />
        </div>
      </div>