body {
  background-color: whitesmoke;
}
img {
  width: 30rem;
  height: 20rem;
  border: 2px black solid;
  padding: 8px;
  padding-bottom: 50px;
  background-color: lightgray;
  /* box-shadow: inset 0 0 0 10px lightgray; */
}
div div:nth-child(1) {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: rotate(-20deg);
  filter: grayscale(100);
  opacity: 0.7;
}
div:nth-child(2) {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: rotate(10deg);
  filter: grayscale(100);
  opacity: 0.7;
}
div:nth-child(3) {
  position: absolute;
  top: 45%;
  left: 35%;
  transform: rotate(20deg);
  filter: grayscale(100);
  opacity: 0.7;
}
div:nth-child(4) {
  position: absolute;
  top: 70%;
  left: 20%;
  transform: rotate(5deg);
  filter: grayscale(100);
  opacity: 0.7;
}
img:hover {
  filter: grayscale(0);
}

#img1:hover {
  transform: rotate(0deg);
  filter: none;
  z-index: 1;
  opacity: 1;
}
#img2:hover {
  transform: rotate(0deg);
  filter: grayscale(0);
  z-index: 1;
  opacity: 1;
}
#img3:hover {
  transform: rotate(0deg);
  filter: none;
  z-index: 1;
  opacity: 1;
}
#img4:hover {
  transform: rotate(0deg);
  filter: none;
  z-index: 1;
  opacity: 1;
}