CODEWITHSUNDEEP
htmlcss
Gurjyot Singh
Gurjyot Singh

Reputation: 95

Text shifts downward when the card is flipped using CSS

I am making flip cards which can show photos of some winners and when the card is flipped then some info about those people is shown. I am able to make those cards and even flip them. But, the problem is that in second card then we hover, the card is flipped and the information is shown beneath the card rather than on the card. Moreover, the image is also reversed and shown but, it shouldn't be showing the image once the card is flipped. The first works fine though. So if anyone can point out the problem then it would be great help.

This is how the second card is behaving when I hover over it. enter image description here

Here's the code.

<html>
<head>
    <style>
        .winners_table{
                border: 2px solid red;
        }
        .winner_container {
                border: 2px solid blue;
                perspective: 1000px;
                display: inline-block;
                margin: 5px;
                width: 220px;
                height: 250px;
                z-index: 1;
                position: relative;
        }
        .winner{
                border: 2px solid black;
                transition: 0.6s;
                transform-style: preserve-3d;
                width: 100%;
                height: 100%;
        }
        .winner_container:hover .winner{
                transform: rotateY( 180deg );
                -webkit-transform: rotateY(180deg);
        }
        .winner img{
                border-radius: 300px;
                border: 1px solid white;
                margin: 0 auto;
                box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
                margin: 0 auto;
        }
        .winner h3{
                text-align: center;
        }
        /* hide back of pane during swap */
        .front, .back {
                position: absolute;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
        }
        /* back, initially hidden pane */
        .back {
                transform: rotateY(180deg);
                padding: 5px;
        }
    </style>
</head>

<body>
    <table>
    <tr class="winners_table">
        <td class="winner_container">
            <div class="winner">
                <div class="front">
                    <img src="facebook.png" alt="Winner" height="200" width="200">
                    <h3>Facebook</h3>
                </div>
                <div class="back">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue</p>
                </div>
            </div>
        </td>
        <td class="winner_container">
            <div class="winner">
                <div calss="front">
                    <img src="facebook.png" alt="Winner" height="200" width="200">
                    <h3>Facebook</h3>
                </div>
                <div class="back">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue </p>
                </div>
            </div>
        </td>
    </tr>
    </table>
</body>

If you want to see the github repo then, it's here.

Upvotes: 0

Views: 91

Answers (1)

Aer0
Aer0

Reputation: 3907

Just a misspelling. In your 2nd div you wrote

<div calss="front">

instead of

<div class="front">

Working demo.

Upvotes: 1

Related Questions