img {
  max-height: 30rem;
  max-width: 20rem;
  width: 12rem;
  height: 12rem;
}
.photo1 {
  display: inline-block;
  transform: rotate(20deg);
  z-index: auto;
  opacity: 0.8;
  position: relative;
  top: 19rem;
  left: 8rem;
  border: rgb(233, 222, 222) 1rem solid;
  border-bottom: rgb(233, 222, 222) 3rem solid;
  transition: 3s;
}
.photo2 {
  display: inline-block;
  transform: rotate(25deg);
  z-index: auto;
  position: relative;
  top: 17rem;
  left: 3rem;
  opacity: 0.7;
  border: rgb(233, 222, 222) 1rem solid;
  border-bottom: rgb(233, 222, 222) 3rem solid;
  transition: 3s;
}
.photo3 {
  display: inline-block;
  transform: rotate(10deg);
  z-index: auto;
  position: relative;
  top: 13rem;
  left: -1rem;
  opacity: 0.6;
  border: rgb(233, 222, 222) 1rem solid;
  border-bottom: rgb(233, 222, 222) 3rem solid;
  transition: 3s;
}
.photo4 {
  display: inline-block;
  transform: rotate(-20deg);
  z-index: auto;
  position: relative;
  top: 7rem;
  left: -10rem;
  opacity: 0.7;
  border: rgb(233, 222, 222) 1rem solid;
  border-bottom: rgb(233, 222, 222) 3rem solid;
  transition: 3s;
}

/* Advance setup */
.photo1:hover {
  filter: drop-shadow(16px 16px 20px rgb(37, 131, 0)) invert(90%);
  transform: scale(1.1);
  cursor: crosshair;
  opacity: 1;
  z-index: 1;
}
.photo2:hover {
  filter: drop-shadow(16px 16px 20px rgb(37, 131, 0)) invert(90%);
  transform: scale(1.1);
  cursor: cell;
  opacity: 1;
  z-index: 1;
}
.photo3:hover {
  filter: drop-shadow(16px 16px 20px rgb(37, 131, 0)) invert(90%);
  transform: scale(1.1);
  cursor: cell;
  opacity: 1;
  z-index: 1;
}
.photo4:hover {
  filter: drop-shadow(16px 16px 20px rgb(37, 131, 0)) invert(90%);
  transform: scale(1.1);
  cursor: cell;
  opacity: 1;
  z-index: 1;
}