top: 200px;
left: 1250px;
width: 1024px;
height: 709px;
z-index: -999;
}
#img1, #img2, #img3 {
position: absolute;
top: 0;
left: 0;
}
#img1 {
opacity: 0.3;
}
#img2, #img3 {
clip: rect(0, 200px, 200px, 0);
}
#main {
position: relative;
width: 200px;
height: 200px;
border: 1px solid white;
cursor: move;
}
.left1, .left2, .left3, .center1, .center2, .right1, .right2, .right3 {
width: 7px;
height: 7px;
background: white;
position: absolute;
transform: translate(-50%, -50%);
}
.left1 {
top: 0;left: 0;cursor: nw-resize;
}
.left2 {
top: 50%;left: 0;cursor: w-resize;
}
.left3 {
top: 100%;left: 0;cursor: sw-resize;
}
.center1 {
top: 0;left: 50%;cursor: n-resize;
}
.center2 {
top: 100%;left: 50%;cursor: s-resize;
}
.right1 {
top: 0;left: 100%;cursor: sw-resize;
}
.right2 {
top: 50%;left: 100%;cursor: e-resize;
}
.right3 {
top: 100%;left: 100%;cursor: se-resize;
}