css flip card hover effect - card front not hiding

Question

I am making a meet our team page where the card flips back when hovered over, shows the baby photo of a team member. The card flips back, except when I hover it over,

(mockup photo by the way)
It goes from here

to here. as you can see, both card-front and the card back is visible . here are my css and react js. How can I fix it? thank you

JS

<div className="team-member">
            <div className="card">
              <div className="card-front">...</div>
              <div className="card-back">...</div>
            </div>
          </div>

CSS

.team-member {
    max-width: 20%;
    perspective: 1000px;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    padding: 0 15px;
    margin-bottom: 2.25rem;
}

.card {
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.card-back,  .card-front {
    width: 100%;
    display: block;
    backface-visibility: hidden;
} 

.team-member__image {
    padding-top: 100%;
    position: relative;
    margin-bottom: 1.25rem;
}

.team-member:hover .card {
    transform: rotateY(180deg);
    width: 100%;
    display: block;
} 

.team-member__image .img-holder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.team-member__image .img-holder img {
    display: block;
    width: 100vw;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}


img {
    border-style: none;
}

.card-back {
    transform: rotateY(180deg);
}

Answer 1

I think that your problems is caused by "flipping" those images at the same time. You don't use separate id's or classes to apply your hover effect, so both of them are considered "flipped" when you try to hover over.