.magnifier-container{position:relative;display:inline-block;cursor:none;--mask-x:0px;--mask-y:0px;--glass-size:160px}.magnifier-container img{display:block;max-width:1000px;width:100%;height:auto}.magnifier-container:hover img{mask-image:radial-gradient(circle var(--glass-size) at var(--mask-x) var(--mask-y),transparent 99%,black 100%);-webkit-mask-image:radial-gradient(circle calc(var(--glass-size)/ 2) at var(--mask-x) var(--mask-y),transparent 99%,black 100%)}.magnifier-glass{position:absolute;border:3px solid #fff;border-radius:50%;box-shadow:0 5px 20px rgba(0,0,0,.4);width:var(--glass-size);height:var(--glass-size);opacity:0;pointer-events:none;transition:opacity .2s;background-repeat:no-repeat;background-color:#fff}.magnifier-container:hover .magnifier-glass{opacity:1}