CSS Card Flip Glitch (Padding? Margin?)

Vote count:

0

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 theres a small highlighted area at the top of the box (which seems to be caused by the text inside). I can't seem to figure out how to fix it.

Here is a CodePen and HTML illustrating the problem. I'm not sure what part of the CSS code is causing the problem. http://ift.tt/1DRqjLR.

<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>

Hover over any of the calendar dates (other than the weekends) and you'll see a small white bar at the top of the box. Any suggestions?

asked 53 secs ago

ipiyale

13

CSS Card Flip Glitch (Padding? Margin?)