Блог

Я создаю meet our team страницу, на которой карта переворачивается при наведении курсора, показывает детскую фотографию члена команды. Карта переворачивается назад, за исключением случаев, когда я ее навожу,

(кстати, фото макета)
Отсюда

сюда. как вы можете видеть, видны как лицевая, так и обратная сторона карты. вот мои css и react js. Как я могу это исправить? Спасибо

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);
}


 

Я думаю, что ваши проблемы вызваны одновременным «переворачиванием» этих изображений. Вы не используете отдельные идентификаторы или классы для применения эффекта наведения, поэтому оба они считаются «перевернутыми» при попытке наведения курсора.