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

【问题标题】：css flip card hover effect - card front not hidingcss翻转卡片悬停效果 - 卡片正面不隐藏
【发布时间】：2021-05-15 13:24:09
【问题描述】：

我正在制作一个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);
}

【问题讨论】：

标签： javascript css reactjs animation hover

【解决方案1】：

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

【讨论】：