Two slice images with labels

Here is my CSS code:

.box {
    width: 100%;
    height: 500px;
}
.sunrise {
    position: absolute;
    background: url('http://ift.tt/29qd8MX') no-repeat center right;
}
.slider {
    width: 52%;
    overflow: hidden;
    display: inline-block;
    transform: skewX(-10deg);
    transition: width 0.8s ease-in-out;
    margin-left: -50px;
    border-right: 6px solid #fff;
    pointer-events: none;
}
.sunset {
    transform: skewX(10deg);
    margin-left: 50px;
    background: url('http://ift.tt/29jfOZO') no-repeat center left;
    pointer-events: auto;
}
.slider:hover {
    width: 53%;
}
.sunrise:hover + .slider {
    width: 51%;
}
#ddd-link, #handlowy-link {
  background: #fff;
    color: #df242b;
    font-size: 36px;
    line-height: 46px;
    padding: 10px 28px;
    position: relative;
    top: 50%;
    margin-top: -57px;
    transition: all 0.25s;
}
#ddd-link {
    float: left;
    z-index: 9999;
}
#handlowy-link {
    float: right;
    text-align: right;
}

Link to CodePen

Is it possible to make whole image clickable? Albo I need 2 white boxes be more centered horizontally to this white line (and they need to stay in fixed position).