i have a bootstrap website where i have done a card which shows its back side on hover, the live website is this:

enter link description here

my code for that section is like below:

    .niru {
            max-width: 2400px;
            width: 100%;
            margin: 0 auto;

        }

        .card-container {
            perspective: 1000px;
            position: relative;
            transform-style: preserve-3d;
            width: 100%;
            height: 380px;

        }

        .flip:hover {
            transform: rotateY(180deg);
        }



        .card {
            position: relative;
            transform-style: preserve-3d;
            max-width: 390px;
            width: 100%;
            height: 380px;

            transition: all 0.8s ease;
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 380px;
            background: white;
            /* backface-visibility: hidden; */
            transform-style: preserve-3d;
            -webkit-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
            -moz-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
            box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
            z-index: 2;
        }

        .front {
            transform: rotateY(0deg);
        }

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

        .card-footer {
            margin: 0 auto;
        }

        .card-img-top {

            width: 100%
        }

        .card-body {
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .card-title {
            color: black
        }

        .card-text {
            font-weight: 800;
            font-size: 17px;
        }

    <section  style="background:black;">
        <div >
            <div >

                <h2  style="color:white;padding-top:2%">
                    THE BEST FOLIO
                </h2>
            </div>
            <div >
                <!-- Card 1 -->
                <div >
                    <div  style="height:210px">
                        <div  style="height:210px">
                            <!-- Front -->
                            <div  style="height:210px">
                                <div >
                                    <p >21-12-2021 / <a style="color:#fe3e6b">CREATIVE</a></p>
                                    <h3 >Small project description goes here</h3>
                                </div>
                            </div>
                            <!-- Back -->
                            <div  style="height:210px">
                                <div >
                                    <img  src="https://picsum.photos/390/210?random=1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        
        </div>
        
        </section>

the card is flickering alot on hover, sometimes its not even showing backside, just flickering. can anyone please tell me what si wrong in here, thanks in advance

CodePudding user response：

Moved the hover on card-container

.card-container:hover .flip{
  transform: rotateY(180deg);
}

.niru {
  max-width: 2400px;
  width: 100%;
  margin: 0 auto;
}

.card-container {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  height: 380px;
}

.card-container:hover .flip{
  transform: rotateY(180deg);
}

.card {
  position: relative;
  transform-style: preserve-3d;
  max-width: 390px;
  width: 100%;
  height: 380px;
  transition: all 0.8s ease;
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background: white;
  /* backface-visibility: hidden; */
  transform-style: preserve-3d;
  -webkit-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  z-index: 2;
}

.front {
  transform: rotateY(0deg);
}

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

.card-footer {
  margin: 0 auto;
}

.card-img-top {
  width: 100%
}

.card-body {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-title {
  color: black
}

.card-text {
  font-weight: 800;
  font-size: 17px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section  style="background:black;">
  <div >
    <div >

      <h2  style="color:white;padding-top:2%">
        THE BEST FOLIO
      </h2>
    </div>
    <div >
      <!-- Card 1 -->
      <div >
        <div  style="height:210px">
          <div  style="height:210px">
            <!-- Front -->
            <div  style="height:210px">
              <div >
                <p >21-12-2021 / <a style="color:#fe3e6b">CREATIVE</a></p>
                <h3 >Small project description goes here</h3>
              </div>
            </div>
            <!-- Back -->
            <div  style="height:210px">
              <div >
                <img  src="https://picsum.photos/390/210?random=1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</section>