CSS Card Flip Glitch (Padding? Margin?)

Question

I'm trying to create an interactive calendar. I've added a neat CSS Card Flip animation (tutorial here) to flip a calendar date and display more information on the back of the card.

Problem if you hover your mouse over the dates, for some reason there is a small, highlighted white bar at the top of the box. I can't seem to figure out how to fix it (red arrow in the image below indicates the problem).

Here is a CodePen and HTML illustrating the problem. I'm not sure what part of the CSS code is causing the problem. http://codepen.io/ipiyale/pen/Athfd?editors=110

<div class="col-lg-2 col-md-4 col-xs-6 thumb flip-container">
    <div class="thumbnail flipper">
        <div class="day front"><h2>1</h2></div>
        <div class="activity back">
            <p>Afternoon Activity</p>
            <p>Evening Activity</p>
        </div>
    </div>
</div>

Any suggestions?

Answer 1

Using backface-visibility appears to help.

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
}

via How to fix flicker when using Webkit transforms & transitions

Another solution, involves moving the elements that are causing the flickering. See Flickering div when using CSS transform on hover.

Answer 2

The issue is caused by the padding: 4px; on the .thumbnail class.

.thumbnail is a built-in Bootstrap style. Your best bet would be to override the padding in your own CSS.

To see this, open the browser inspector (in Chrome, right-click and choose "Inspect Element") and you'll see that the .thumbnail class has a padding of 4px. If you uncheck that style, you'll see that the problem goes away.

I've posted a fork of your demo here. You can see near the bottom of your CSS where I added an override for padding: http://codepen.io/anon/pen/eHKma

.thumbnail {
    padding: 0;
}