* {
  box-sizing: border-box;
  position: relative;
}

#slides {
  height: 355px;
  width: 100%;
  position: relative;
}

.toggle {
  width: auto;
  display:inline-block;
  padding: 10px 40px;
  color: white;
  font-size:20px;
  font-weight:600;
  color:#333333;
  z-index: 1;
}

.slide2 {
  width: 100%;
  height: 100%;
  display: none;
  background: green;
  top: 45px;
  left: 0;
  position: absolute;
}

#slide-1 {
  display: block;
}

.toggle:hover ~ #slide-1 {
  display: none;
}

#toggle-1, #slide-1 {
  background-color: #ffffff00;
}

#toggle-1:hover ~ #slide-1 {
  display: block;
}

#slide-1:hover {
  display: block;
}

#toggle-2, #slide-2 {
  background-color: #ffffff00;
}

#toggle-2:hover ~ #slide-2 {
  display: block;
}

#slide-2:hover {
  display: block;
}

#toggle-3, #slide-3 {
  background-color: #ffffff00;
}

#toggle-3:hover ~ #slide-3 {
  display: block;
}

#slide-3:hover {
  display: block;
}

#toggle-4, #slide-4 {
  background-color: #ffffff00;
}

#toggle-4:hover ~ #slide-4 {
  display: block;
}

#slide-4:hover {
  display: block;
}