.container {
    width: 100%;
}

.mask {
    border: 0;
    width: 100%;
}

.zone {
    position: absolute;
    width: 50%;
    height: 50%;
    pointer-events: auto; /* vuelve a activar eventos en estas zonas */
}

.zone .text {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  font-family: sans-serif;
  border-radius: 5px;
}

.area:hover .text {
    display: block;
}