style.css

:root{
    --card-height:300px;
    --card-width: calc(var(--card-height)/1.5);
}

body{
    /* width: 100vw; */
    height:100vh;
    margin: 50px 0;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #191c29;
    font-family: papyrus;
    color: rgb(255, 255, 255);
}

.card{
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 36px;
    perspective: 2500px;
    margin: 0 50px;
    cursor: pointer;
}

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

.wrapper{
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.wrapper::before,
.wrapper::after{
    content: '';
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
}

.wrapper::before{
    top:0;
    height: 100%;
    background-image: linear-gradient(to top, transparent 46%, rgb(12,13,19,0.5) 68%, rgb(12,13,19) 97%);
}

.wrapper::after{
    bottom:0;
    opacity: 0;
    background-image: linear-gradient(to bottom, transparent 46%, rgb(12,13,19,0.5) 68%, rgb(12,13,19) 97%);
}

.title{

    width: 300px;
    transition: transform 0.5s;
    text-align: center;
    background: #191c29;
    position: absolute;
    rotate: 3deg;

}

.card:hover .title::after{
    
    content: "The Fairy Queen Erza Scarlet";
    
    
}

.character{
    width: 100%;
    opacity: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.5s;
}

.card:hover .wrapper{
    transform: perspective(900px) translateY(-5%) rotate(3deg) translateZ(0);

}

.card:hover .title{
    transform: translate3d(0%, -10%, 100px);
}

.card:hover .wraper::after,
.wraper::before{
    opacity: 1;
}

.card:hover .wrapper::after{
    height: 120px;
}

.card:hover .wrapper::before{
    opacity: 1;
}

.card:hover .character{
    opacity: 1;
    transform: translate3d(0%,-30%,-100px);
}