:root {
  --conta-bg-color: #333;
  --top-bg-color: rgba(255, 0, 0, 0.7);
  --top-button-hover-color: rgba(161, 11, 11, 0.3);
  --down-bg-color: rgba(255, 255, 255, 0.8);
  --down-button-hover-color: rgba(92, 92, 92, 0.3);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 500ms;
}

.split-h {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.split.up {
  top:0;
  background-color: red;
/*  background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat; */
  background-size: cover;
}

.split.up:before {
  position:absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--up-bg-color);
}

.split.down {
  bottom:0;
  background-color: white;
/*  background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat; */
  background-size: cover;
}

.split.down:before {
  position:absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--down-bg-color);
}

.split.up, .split.down, .split.down:before, .split.up:before {
  transition: var(--speed) all ease-in;
}

.hover-up .up {
  width: var(--hover-width);
}

.hover-up .down {
  width: var(--other-width);
}

.hover-up .down:before {
  z-index: 2;
}


.hover-down .down {
  width: var(--hover-width);
}

.hover-down .up {
  width: var(--other-width);
}

.hover-down .up:before {
  z-index: 2;
}