How do I add a web gl hover effect to a container?

I want the image to fit in my container like an object-fit cover and not take the space of whole viewport width. I took inspirations for the effect from this website.

.casestart {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.imageside {
  width: 52vw;
  height: 100vh;
  position: absolute;
  right: 0;
  background: #000;
}
<div class="casestart">
  <div class="imageside">
    <img id="hoverImage" src="12.webp" alt="" draggable="false" srcset="">
  </div>
</div>

I’ve tried everything man. It doesnt work.