* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 263px; /*should be the same height as the images*/
}
.img-comp-container .labelbefore {
  display: auto;
  position: absolute;
/*  width: 100px; */
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px;
  box-sizing: border-box;
  color: #DDD;
  text-align: right;
  font-size: .8em;
}
.img-comp-container .labelafter {
  display: auto;
  position: absolute;
/*  width: 100px; */
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px;
  box-sizing: border-box;
  color: #DDD;
  text-align: left;
  font-size: .8em;
}
.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
}

.img-comp-slider {
  content: 'a';
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
  /*center icon vertically and horizontally*/
  display: flex;
  justify-content: center;
  align-items: center;
  /* icon size and color*/
  font-size:2em;
  color:white;
}