My card can both hover and click, but there seems to be a small glitch.
After clicking on the card and then moving the cursor away from the front, the hover effect doesn't work correctly. It immediately flips back to the front side. The hover effect only functions properly when hovering out from the back side.
What part of the code am I overlooking to fix this hover glitch?
Your assistance with this matter is greatly appreciated.
document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .card').toggleClass('flip');
}
});.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>