[Card] 카드 만들기 - Hover 효과 예제

[HTML]

<template>
    <div class="container">
        <div class="card">
            <div class="card-warpper">
                <div class="imgBx">
                    <img src="../assets/bird1.jpg"/>
                </div>
                <div class="content">
                    <h2>Card 1</h2>
                    <p>
                        I Love all of your contents. Amazing Man! keep up the good work,
                        we are learning so much from you. Love form Ethiopia
                        omg, beautiful animation and so simple to create...
                        You're so good, thanks for help us. Greetings from Brazil :D
                    </p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-warpper">
                <div class="imgBx">
                    <img src="../assets/bird2.jpg"/>
                </div>
                <div class="content">
                    <h2>Card 1</h2>
                    <p>
                        I Love all of your contents. Amazing Man! keep up the good work,
                        we are learning so much from you. Love form Ethiopia
                        omg, beautiful animation and so simple to create...
                        You're so good, thanks for help us. Greetings from Brazil :D
                    </p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-warpper">
                <div class="imgBx">
                    <img src="../assets/bird3.jpg"/>
                </div>
                <div class="content">
                    <h2>Card 1</h2>
                    <p>
                        I Love all of your contents. Amazing Man! keep up the good work,
                        we are learning so much from you. Love form Ethiopia
                        omg, beautiful animation and so simple to create...
                        You're so good, thanks for help us. Greetings from Brazil :D
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

 

[CSS]

<style>
    @import url('https://fonts.googleapis.com/css2@family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

    * {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #16384c;
    }

    .container {
        position: relative;
        width: 1100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 30px;
    }

    .container .card {
        position: relative;
        max-width: 300px;
        height: 140px;
        background: #fff;
        margin: 30px 10px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 5px 202px rgba(0, 0, 0, 0.5);
        transition: 0.3s ease-in-out;
        border-radius: 4px;
    }

    .container .card .card-warpper{
        grid-column: 1;
        grid-row: 2;
    }

    .container .card:hover {
        height: 420px;
    }

    .container .card .imgBx {
        position: relative;
        width: 260px;
        top: -60px;
        left: 20px;
        z-index: 1;
        /*//box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);*/
        filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.2));
    }

    .container .card .imgBx img {
        max-width: 100%;
        border-radius: 4px;
    }

    .container .card .content {
        position: relative;
        margin-top: -140px;
        padding: 10px 15px;
        text-align: center;
        color: #111;
        visibility: hidden;
        opacity: 0;
        transition: 0.3s ease-in-out;
    }

    .container .card:hover .content {
        visibility: visible;
        opacity: 1;
        margin-top: -40px;
        transition-delay: 0.3s;
    }
</style>

 

[Assets]

assets.zip

0.69MB

 

[Working]

 

출처 : https://www.youtube.com/watch?v=8b2mTq0Xrtw

수정 : 본인