styles.css

body {
  font-family: metal lord;
}
.card-1 {
  background-image: url(/img/1980-Iron-Maiden.jpg);
}
.card-2 {
  background-image: url(/img/1980-running-free.jpg);
}
.card-3 {
  background-image: url(/img/1980-sanctuary.jpg);
}
.card-4 {
  background-image: url(/img/1980.woman-in-uniforms.jpg);
}
.card-5 {
  background-image: url(/img/1981.killers.jpg);
}

.card {
  position: absolute;
  background-position: center;
  background-size: cover;
  height: 500px;
  width: 500px;
}
.arrow {
  position: absolute;
  width: 10%;
  top: 50%;
  transform: translate(0, -50%);
  transition: ease-in 0.1s;
  cursor: pointer;
  filter: drop-shadow(1px 3px 3px #000);
}
.arrow-left {
  left: 10px;
}
.arrow-right {
  right: 10px;
}
.arrow-icon {
  width: 100%;
}

.arrow:hover {
  width: 11%;
  filter: drop-shadow(5px 9px 9px #000);
}
#one:checked ~ .card-1,
#two:checked ~ .card-2,
#three:checked ~ .card-3,
#four:checked ~ .card-4,
#five:checked ~ .card-5 {
  z-index: 2;
}