css翻转卡片悬停效果 - 卡片正面不隐藏

如何解决css翻转卡片悬停效果 - 卡片正面不隐藏

我正在制作一个 meet our team 页面，其中的卡片在悬停时会翻转回来，显示团队成员的婴儿照片。卡片向后翻转，除非我将其悬停在上方，

（顺便说一下样机照片）
从这里开始

到这里。如您所见，卡片正面和卡片背面都是可见的。这是我的 css 和 react 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);
}

解决方法

我认为您的问题是由同时“翻转”这些图像引起的。您不使用单独的 id 或类来应用悬停效果，因此当您尝试悬停时，它们都被视为“翻转”。