悬停效果仅在悬停在卡片上半部分时触发

Question

我的网站上有一个包含三张翻转卡片的部分。图像最初是灰度的，但在悬停时，它们是彩色的。但是，当我将鼠标悬停在卡片的正面时，效果只会在卡片的上半部分触发。谁能向我解释为什么会这样？

    cards-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .card-wrapper{
        flex:0 1 250px;
        margin: 10px;
        min-height: 300px;
    }
    .card{
        width: 100%;
        height: 100%;  
        transition: transform 0.8s;
        transform-style: preserve-3d;
        box-shadow: 0px 0px 50px #c4c4c4;
    }
    .flip{
        transform: rotateX(180deg);
    }
    .front {
        background-size:cover;
        background-position: center;
        cursor: pointer;
        -webkit-filter: grayscale(90%) brightness(70%);
        filter: grayscale(90%) brightness(70%);
        transition: 300ms ease-in;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
    }
    .front:hover{
        -webkit-filter: grayscale(20%) ;
        filter: grayscale(20%) ;
    }

    .card-1 .front{
        background-image:url(https://source.unsplash.com/nCya9c9AadA);
    }

    .card-2 .front{
        background-image:url(https://source.unsplash.com/d0iASNy8p50);
    }
    .card-3 .front{
        background-image:url(https://source.unsplash.com/pa_McjjynOA);

    }
    .back{
        width: 100%;
        height: 100%;
        background: linear-gradient(pink, rgb(168, 235, 255), lavender);
        /* transform: rotateY(180deg); */
        -webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        -o-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }

      <div class="container-2 rellax" data-rellax-speed="2" data-rellax-zindex="3">
        <div class="title">
          <h1>Lotus
            <i class="fas fa-spa fa-1x"></i>
            Yoga</h1>
        </div>
        <div class="cards-container">
          <div class="card-wrapper">
            <div class="card card-1">
              <div class="front">
                <h2>pee</h2>
              </div>
              <div class="back">
                <h2>poo</h2>
              </div>

            </div>
          </div>
          <div class="card-wrapper">
            <div class="card card-2">
              <div class="front">
                <h2>bleep</h2>
              </div>

              <div class="back">
                <h2>bloop</h2>
              </div>

            </div>
          </div>
          <div class="card-wrapper">
            <div class="card card-3">
              <div class="front">
                <h2>pee</h2>
              </div>

              <div class="back">
                <h2>poo</h2>
              </div>

            </div>
          </div>
        </div>
      </div>

重要提示

当我注释掉这段代码时，悬停效果可以正常工作。但是，卡的背面是倒置的，所以这个代码是必要的。

    .back{
        -webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        -o-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }

有人对此问题有任何解释/解决方案吗？

Answer 1

我调整了 Asif 的解决方案，效果最好：

我从后面移除了变换：

.back {
  width: 100%;
  height: 100%;
  background: linear-gradient(pink, rgb(168, 235, 255), lavender);
}

并在悬停时添加它

.card:hover .back {
  -webkit-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  -o-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

Answer 2

您可以通过隐藏背面然后在悬停正面时显示来实现此目的。 你可以这样做：

.back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    display: none;
}
.front:hover .back{
    display: block;
}