<style>
.magnifier {
  position: absolute;
  pointer-events: none;
  width: 20vw; /*רוחב העיגול*/
  height: 20vw; /*גובה העיגול*/
  border-radius:300px; /*רדיוס פינות העיגול*/
  border-width: 2px; /*עובי קו מסגרת*/
  border-color: white; /*צבע מסגרת*/
  border-style:solid;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%) scale(0); /* מתחיל מוסתר */
  transition: transform 0.25s ease; /* מעבר חלק */
  z-index: 5; 
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){
  const zoom = 1.5; // מידת הההגדלה
  const img = document.querySelector(".focus-img img");
  
  const magnifier = document.createElement("div");
  magnifier.classList.add("magnifier");
  magnifier.style.backgroundImage = `url(${img.src})`;
  magnifier.style.backgroundSize = `${img.width * zoom}px ${img.height * zoom}px`;

  img.parentElement.style.position = "relative";
  img.parentElement.appendChild(magnifier);

  img.parentElement.addEventListener("mouseenter", function(){
    magnifier.style.transform = "translate(-50%, -50%) scale(1)";
  });

  img.parentElement.addEventListener("mousemove", function(e){
    const rect = img.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    magnifier.style.left = `${x}px`;
    magnifier.style.top = `${y}px`;
    magnifier.style.backgroundPosition = 
      `-${x * zoom - magnifier.offsetWidth / 2}px -${y * zoom - magnifier.offsetHeight / 2}px`;
  });

  img.parentElement.addEventListener("mouseleave", function(){
    magnifier.style.transform = "translate(-50%, -50%) scale(0)";
  });
});
</script>