/*Some CSS*/
* {
    margin: 0;
    padding: 0;
}

.magnify {
    width: 100%;
    margin: 50px auto;
    position: relative;
    cursor: none
}

/*Lets create the magnifying glass*/
.large {
    width: 305px;
    height: 305px;
    position: absolute;
    border-radius: 100%;

    /*Multiple box shadows to achieve the glass effect*/
    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);

    /*hide the glass by default*/
    display: none;
}

/*To solve overlap bug at the edges during magnification*/
.small {
    widows: 200px;
    display: block;
}