.image {
    max-width: 300px;
    margin: 25px;
}

    .image img {
        max-width: 100%;
    }

.loupe {
    display: none;
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    box-shadow: 5px 5px 12px black;
    background: rgba(0, 0, 0, 0.25);
    cursor: crosshair;
    overflow: hidden;
}

    .loupe img {
        position: absolute;
        right: 0;
    }

.img-magnifier-container {
    position: relative;
}

.img-magnifier-glass {
    position: absolute;
    border: 1px solid #01bcd5;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 150px;
    height: 150px;
}

.glass {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
    cursor: crosshair;
    z-index: 99999;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
}