js-image-clipper/src/imageClipper.css

A JavaScript image clipping plug-in

.imageClipperBody{
    height: 400px;
    padding: 20px;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.imageClipperBodyContainer{
    position: relative;
    width:100%;
    height: 100%;
    cursor: move;
}
.imageClipperImgContainer{
    overflow: hidden;
    width:100%;
    height: 100%;
    position: relative;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.imageClipperShowImg,.imageClipperControlImg{
    position: relative;
    visibility: hidden;
}
.imageClipperImgControl{
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}
.imageClipperImgMask{
    position: absolute;
    width:100%;
    height: 100%;
    background-color:rgba(0,0,0,0.5);
    top:0;
    left:0;
    z-index: 1;
}