CODE EXAMPLE FOR CSS

card flip css

.flipping-card-item-side-back{
    color: #000;
    transform: rotateY(180deg);
}


.flipping-card-item-wrapper:hover .flipping-card-item-side-front{
    transform: rotateY(-180deg);
}

.flipping-card-item-wrapper:hover .flipping-card-item-side-back{
    transform: rotateY(0);
}

.flipping-card-item-img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-blend-mode: color;
}

.flipping-card-back-wrapper{
    font-weight: 200;
    position: relative;
    top: 25%;
    left: 0;
    margin: 2rem;
    text-align: center;
}

.flipping-card-back-wrapper__btn {
    margin-top: 2rem;
    padding: .7rem;
    text-align: center;
    color: #ffffff;
    border: 0;
    background-image: linear-gradient(to right bottom, #ffa41b, #ff5151);
    transition: all .5s;
}

.flipping-card-back-wrapper__btn:hover {
    background-image: none;
    color: #ffa41b;
    border: 1px solid #ffa41b;
}