Magnify Lens

<div class="nuda-magnify-area">
  <div class="nuda-magnify__text">Hover for ×3 magnification.</div>
  <div class="nuda-magnify__lens"></div>
</div>

(function () {
  var area = document.querySelector('.nuda-magnify-area');
  var lens = area.querySelector('.nuda-magnify__lens');
  if (!area) return;

  area.addEventListener('mousemove', function (e) {
    var rect = area.getBoundingClientRect();
    lens.style.left = (e.clientX - rect.left) + 'px';
    lens.style.top  = (e.clientY - rect.top) + 'px';
  });
})();

.nuda-magnify-area {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 130px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.nuda-magnify__text {
  color: #a0a0a8;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

.nuda-magnify__lens {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #e4ff54;
  background: rgba(228,255,84,.06);
  backdrop-filter: invert(.1) saturate(1.4) blur(.4px);
  -webkit-backdrop-filter: invert(.1) saturate(1.4) blur(.4px);
  box-shadow: 0 0 0 4px rgba(228,255,84,.08);
  pointer-events: none;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.nuda-magnify-area:hover .nuda-magnify__lens {
  transform: translate(-50%,-50%) scale(1);
}