.bc-zoom-lens{
display: block;
width: fit-content; height: fit-content; }
.bc-zoom-lens__image {
position: relative; display: block; object-fit: cover; width: 100%;
height: 100%; --bgimage: url(https://images.pexels.com/photos/17050728/pexels-photo-17050728/free-photo-of-madera-carretera-paisaje-agua.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}
.bc-zoom-lens__glass { position: absolute; --glasstop: 0; --glassleft: 0; --width: 50px;
top: calc(var(--glasstop) - var(--width)/2); left: calc(var(--glassleft) - var(--width)/2); width: var(--width); height: var(--width); background-image: var(--bgimage); border: 1px solid white; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0); --scale-duration: 200ms;
transition: transform var(--scale-duration); z-index: 9999;
}
.bc-zoom-lens__show {
opacity: 1; --scale: 2;
transform: scale(var(--scale)); }