body
{
    background-color: black;
}
.box
{
    width: 300px;
    height: 400px;
    position: relative;
    margin:100px auto;
    &:hover
    {
        >img
        {
            &:first-of-type
            {
                transform:perspective(900px) rotateX(30deg);
                box-shadow:0 10px 100px rgb(255,255,255,0.444);
            }
            &:last-of-type
            {
                opacity: 1;
                transform:translateY(-30px);
                

            }
        }
    }
    >img
    {
        width: 100%;
        height: 100%;
        object-fit:cover;
        position: absolute;
        top: 0;left: 0;
        transition:2s;
        &:first-of-type
        {

        }
        &:last-of-type
        {
            opacity: 0;
            transition-property:opacity,transform;
            transition-delay:1s , 1s;
            transition-duration:1s , 2s;
            transition-timing-function:ease-out;

        }
    }
}