.container {
  width: 100%;
  height: 100%;
}

.container div {
  position: absolute;
  height: 216px;
  width: 144px;
  background-color: #ebebeb;
  border: 5px solid #ffffff;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 8%;
  box-shadow: #c7c7c7 -2px 2px 4px;
  transform-origin: bottom right;
  scale: 1;
  transition-duration: 200ms;
}

.container div:nth-child(n) {
  transform: rotate(0deg) translate(0px, -8px);
}

.container:hover div:nth-child(1) {
  transform: rotate(-40deg) translate(0px, -8px);
  opacity: 16%;
}
.container:hover div:nth-child(2) {
  transform: rotate(-32deg) translate(0px, -8px);
  opacity: 32%;
}
.container:hover div:nth-child(3) {
  transform: rotate(-24deg) translate(0px, -8px);
  opacity: 48%;
}
.container:hover div:nth-child(4) {
  transform: rotate(-16deg) translate(0px, -8px);
  opacity: 64%;
}
.container:hover div:nth-child(5) {
  transform: rotate(-8deg) translate(0px, -8px);
  opacity: 80%;
}
.container:hover div:nth-child(6) {
  transform: rotate(0deg) translate(0px, -8px);
  opacity: 100%;
}