카드 호버 효과

폰트

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">

CSS

 *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        height:100vh;
        background-color:#36ba59;
        font-family: 'Poppins', sans-serif;
        position: relative;
        display:flex;
        align-items: center;
        justify-content:center;
    }
    .card1{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:absolute; 
        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);
        z-index: 0;

    }
    .card2{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:absolute; 

        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);
        z-index: 1;

        cursor: pointer;
        transition: transform 2s ease-in-out;
    }
    .card2:hover{
        transform:translateX(10%) rotate(10deg);
        transition: transform 2s ease-in-out;
    }
    .card span{
        font-size:30px;
        font-weight:bold;
        color:#ff3019;
        position:absolute;
    }


    .card1 span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }
    .card2 span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }

    svg{
        fill:#ff3019;

    }
    .heart1{
        position:absolute;
        top:70px;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .heart2{
        position:absolute;
        bottom:10px;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }
    .heart3{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }

HTML

 <div class=" card card1">
        <span class="number1">2</span>
        <span class="number4">2</span>
        <div class="heart1">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
            <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
        </svg>
        </div>
        <div class="heart2">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
    </div>
    <div class="card card2">
        <span class="number1">3</span>
        <span class="number4">3</span>
        <div class="heart1">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
        <div class="heart2">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
        <div class="heart3">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
    </div>