coolzoom/src/coolzoom.css

Coolzoom is a jQuery plugin for displaying enlarged images on webpages. Coolzoom works on desktop, mobiles and tablets.

/* Main image wrapper */
.coolzoom-hover-container
{
    /*cursor: url(magni.svg), auto;*/
    cursor: zoom-in;
    cursor: crosshair;
}

/* Notification container */
.coolzoom-notification-background
{
    background-color: black;
    height: 2rem;
}

/* Notification Text */
.coolzoom-notification
{
    display: block;
    color: white;
    right: 58px;
    z-index: 8000;
    font-size: 1rem;
    width: 40px;
    height: 20px;
    opacity: 0.8;
    margin: .4rem;
    background: transparent;
}

/* Magnifying box */
.coolzoom-magnifying-glass
{
    border: 5px solid #ddd;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52);
}

.coolzoom-inner-magnifying-glass
{
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.coolzoom-round
{
    /*box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;*/
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 3px 3px rgba(0, 0, 0, 0.25), 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.35), 0 0 3px 3px rgba(0, 0, 0, 0.25), 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0 0 0 8px rgba(0, 255, 255, 0.35), 0 0 8px 8px rgba(0, 0, 0, 0.25), 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
    border: 2px solid rgba(0, 255, 255, .8);
}

.coolzoom-square
{
    box-shadow:         0 0 8px 0 rgba(50, 50, 50, 0.57);
    border: 4px solid rgba(255, 255, 255, .4);
}

/* Zoomable area / popup */
.coolzoom-zoom-area
{
    background-color: #123456;
    -webkit-box-shadow: 0 0 6px 0 rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0 0 6px 0 rgba(50, 50, 50, 0.75);
    box-shadow:         0 0 6px 0 rgba(50, 50, 50, 0.75);
}