Currently, I am working on a div element that has a hover effect to flip and reveal content on the other side. The functionality is mostly there, but I have encountered a frustrating issue that I can't seem to resolve.
During the flip animation, only half of the content that should be displayed on the flipped side is visible. This discrepancy is puzzling me, and I want to address it as soon as possible.
$(function() {
var frontHeight = $('.front .inner').height();
var backHeight = $('.back .inner').height();
var noImg = false;
if ($('.front-image')) {
noImg = true;
$('.flipper').height(backHeight);
}
if (frontHeight > backHeight && !noImg) {
$('.flipper').height(frontHeight);
} else {
$('.flipper').height(backHeight);
}
})/* container for entire content, maintaining perspective */
.flip-container {
perspective: 1000px;
transform-style: preserve-3d;
position: relative;
width: 100%;
height: 100%;
}
/* UPDATE! Hover effect to flip the pane */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front,
.flip-container:hover .front-image {
transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
padding: 10px;
}
.front .inner h3,
.back .inner h3 {
color: white;
}
.front-image,
.front-image .inner {
height: 100%;
width: 100%;
}
/* defining the speed of flip transition here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
width: 100%;
height: 100%;
padding: 10px;
background-color: #3498db;
color: white;
position: relative;
}
/* hiding the back of the pane during the transition */
.front,
.back,
.front-image {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATE! Front pane rendered above the back */
.front,
.front-image {
z-index: 2;
transform: rotateY(0deg);
}
/* initially hidden back pane*/
.back {
transform: rotateY(-180deg);
}
/*
Updates for vertical flipping
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<div class="inner">
<h3>
cool
</h3>
</div>
</div>
<div class="back">
<div class="inner">
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor tincidunt massa, et commodo lorem tincidunt auctor. Duis eu nisi bibendum, vehicula elit in, congue ex. Aliquam erat volutpat. Donec ac leo eu ante vulputate efficitur. Vivamus
lobortis blandit elit, sit.....
</h3>
</div>
</div>
</div>
</div>