* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

#main {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  position: absolute;
  height: 300px;
  width: 230px;
  border: 1px solid salmon;
  border-radius: 20px;
  overflow: hidden;
}
#card1 {
  z-index: 4;
  background-color: salmon;
}

#card2 {
  z-index: 3;
  background-color: blue;
  rotate: -7deg;
}

#card3 {
  z-index: 2;
  background-color: green;
  rotate: -14deg;
}

#card4 {
  z-index: 1;
  background-color: yellow;
  rotate: -21deg;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#card2:hover {
  z-index: 5;
}
#card3:hover {
  z-index: 5;
}
#card4:hover {
  z-index: 5;
}