I am attempting to create a series of divs that simulate the flipping action of a notecard.
Unfortunately, when I hover over the div, it turns white because I have set the display property to none. I am unsure how to make the other div (.back) visible.
You can find an example on the following fiddle: https://jsfiddle.net/q2ukg0cz/
Here is a simplified version of the code:
<div class="flip-card">
<div class=front">Hello</div>
<div class="back">World</div>
</div>
I am not sure what mistake I am making in this case.
div.flip-card {
display: block;
width: 200px;
height: 200px;
-webkit-perspective: 600px;
perspective: 600px;
}
div.flip-card > div.front,
div.flip-card > div.back {
display: block;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding-top: 1em;
border: 1px solid #000;
color: #fff;
font-size: 3em;
text-align: center;
text-shadow: -1px -1px rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
div.flip-card > div.front {
background: #888;
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
div.flip-card > div.back {
background: #444;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
div.flip-card > div.front:hover {
background: #444;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip-card > div.back:hover {
background: #888;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}