.compare_img { 
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.compare_img::after { width: 100%; height: 100%; content: ''; position: absolute; z-index: 3; }
.compare_img * {
    margin: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: absolute;
    outline: 0px;
}
.compare_img .img { background-size: auto 100%; z-index: 1; }
.compare_img .img.divisor { overflow: visible; width: 50%; z-index: 2; border-right: 1px solid #fff; box-sizing: border-box; }

.compare_img .img.divisor .compare_img_hdlr { border: solid 2px rgba(255, 255, 255, .75); width: 40px; height: 40px; top: 50%; right: 0px; transform: translate(50%, -50%); border-radius: 50%; background-color: rgba(0, 0, 0, 0.125); }

.compare_img .img.divisor::after,
.compare_img .img.divisor::before,
.compare_img .img.divisor .compare_img_hdlr::after,
.compare_img .img.divisor .compare_img_hdlr::before {
    border: solid transparent;
    content: '';
    position: absolute;
    border-width: 8px;
}
.compare_img .img.divisor::after,
.compare_img .img.divisor::before {
    right: -8px;
}
.compare_img .img.divisor .compare_img_hdlr::after,
.compare_img .img.divisor .compare_img_hdlr::before {
    top: 50%;
}
.compare_img .img.divisor::before { border-top-color: #fff; top: 0px; }
.compare_img .img.divisor::after { border-bottom-color: #fff; bottom: 0px; }
.compare_img .img.divisor .compare_img_hdlr::after{ border-left-color: #fff; transform: translate(20%, -50%); right: 0px;}
.compare_img .img.divisor .compare_img_hdlr::before { border-right-color: #fff; transform: translate(-20%, -50%); }