*{
    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;
     /* top:50%;
     left:50%;
     transform:translate(-50%,-50%); */
    height:300px;
    width:230px;
    border: 1px solid salmon;
   border-radius:20px;
}
#card1{
    z-index:4;
  background-color:salmon;
}
#card2{
    z-index:3;
  rotate:-7deg;
  background-color:blue;
}
#card3{
  z-index:2;
  rotate:-14deg;
  background-color:green;
}
#card4{
    z-index:1;
   rotate:-21deg;
   background-color:yellow;
}
img{
    height:100%;
    width:100%;
    object-fit: cover;
    border-radius:20px;
}


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