* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

background:
    radial-gradient(
      circle at 50% 20%,
      #202534,
      #10131b 48%,
      #080a0f
    );

color: white;
}

.demo {
  min-height: 100vh;

display: flex;
  flex-direction: column;

align-items: center;
  justify-content: center;

padding: 30px;
}

.header {
  text-align: center;

margin-bottom: 22px;
}

.eyebrow {
  display: block;

margin-bottom: 7px;

color:
    rgba(255,255,255,.35);

font-size: 9px;
  font-weight: 700;

letter-spacing: 2.3px;
}

.header h1 {
  margin: 0;

font-size: 30px;

letter-spacing: -1px;
}

.header p {
  margin: 7px 0 0;

color:
    rgba(255,255,255,.42);

font-size: 11px;
}

/* IMAGE */

.image-wrap {
  position: relative;

width:
    min(900px, 94vw);

aspect-ratio: 16 / 10;

overflow: hidden;

border:
    1px solid
    rgba(255,255,255,.1);

border-radius: 24px;

background: #111;

box-shadow:
    0 35px 90px
    rgba(0,0,0,.48);

cursor: none;
}

.image-wrap img {
  display: block;

width: 100%;
  height: 100%;

object-fit: cover;

user-select: none;

pointer-events: none;
}

/* MAGNIFIER */

.magnifier {
  position: absolute;

width: 180px;
  height: 180px;

border-radius: 50%;

border:
    4px solid
    rgba(255,255,255,.9);

background-repeat:
    no-repeat;

box-shadow:
    0 18px 45px
      rgba(0,0,0,.45),

inset 0 0 0 2px
      rgba(0,0,0,.15);

pointer-events: none;

opacity: 0;

transform:
    translate(-50%, -50%)
    scale(.85);

transition:
    opacity .15s,
    transform .15s;

z-index: 10;
}

.magnifier.visible {
  opacity: 1;

transform:
    translate(-50%, -50%)
    scale(1);
}

/* HANDLE */

.magnifier::after {
  content: "";

position: absolute;

width: 70px;
  height: 16px;

right: -53px;
  bottom: -25px;

border-radius: 12px;

background:
    linear-gradient(
      90deg,
      #f5f5f5,
      #bfc4cd
    );

transform:
    rotate(45deg);

transform-origin:
    left center;

box-shadow:
    0 5px 12px
    rgba(0,0,0,.25);
}

/* GLASS HIGHLIGHT */

.magnifier::before {
  content: "";

position: absolute;

left: 24px;
  top: 19px;

width: 48px;
  height: 24px;

border-radius: 50%;

border-top:
    5px solid
    rgba(255,255,255,.35);

transform:
    rotate(-30deg);

pointer-events: none;
}

/* MOBILE */

@media (
  max-width: 600px
) {

.magnifier {
    width: 130px;
    height: 130px;
  }

.magnifier::after {
    width: 50px;
    height: 13px;

right: -38px;
    bottom: -20px;
  }

}

const imageWrap =
  document.getElementById(
    "imageWrap"
  );

const image =
  document.getElementById(
    "mainImage"
  );

const magnifier =
  document.getElementById(
    "magnifier"
  );

const zoom = 2.5;

/* SET IMAGE */

function setupMagnifier() {

magnifier.style.backgroundImage =
    `url("${image.src}")`;

}

if (image.complete) {

setupMagnifier();

} else {

image.addEventListener(
    "load",
    setupMagnifier
  );

}

/* MOVE MAGNIFIER */

imageWrap.addEventListener(
  "mousemove",
  function(event) {

const rect =
      imageWrap
        .getBoundingClientRect();

let x =
      event.clientX -
      rect.left;

let y =
      event.clientY -
      rect.top;

/* Keep lens inside image */

x =
      Math.max(
        0,
        Math.min(
          rect.width,
          x
        )
      );

y =
      Math.max(
        0,
        Math.min(
          rect.height,
          y
        )
      );

magnifier.style.left =
      x + "px";

magnifier.style.top =
      y + "px";

/*
      Background size is the
      original displayed image
      multiplied by zoom level.
    */

magnifier.style.backgroundSize =
      `${rect.width * zoom}px
       ${rect.height * zoom}px`;

/*
      Position zoomed image
      underneath the lens.
    */

const bgX =
      -x * zoom +
      magnifier.offsetWidth / 2;

const bgY =
      -y * zoom +
      magnifier.offsetHeight / 2;

magnifier.style.backgroundPosition =
      `${bgX}px ${bgY}px`;

magnifier.classList.add(
      "visible"
    );

}
);

/* HIDE */

imageWrap.addEventListener(
  "mouseleave",
  function() {

magnifier.classList.remove(
      "visible"
    );

}
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground