body {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: auto;
    height: 100vh;
    background-color: antiquewhite;
}

.images {
    position: relative;
    width: 100px;
    height: 100px; 
}

.images img {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: skew(30deg, -20deg);
    transition: 0.5s;
}   

.images img:nth-child(1){
    opacity: 1;
    z-index: 5;
}

.images img:nth-child(2){
    opacity: 0.8;
    z-index: 4;
}

.images img:nth-child(3){
    opacity: 0.6;
    z-index: 3;
}

.images img:nth-child(4){
    opacity: 0.4;
    z-index: 2;
}

.images img:nth-child(5){
    opacity: 0.2;
    z-index: 1;
}

.images:hover img:nth-child(1){
    transform: translateY(-48px) skew(30deg, -20deg);
}

.images:hover img:nth-child(2){
    transform: translateY(-36px) skew(30deg, -20deg);
}

.images:hover img:nth-child(3){
    transform: translateY(-24px) skew(30deg, -20deg);
}

.images:hover img:nth-child(4){
    transform: translateY(-12px) skew(30deg, -20deg);
}

.images:hover img:nth-child(5){
    transform: translateY(0px) skew(30deg, -20deg);
}