정보실

웹학교

정보실

css CSS Card Hover Effects

본문

https://codepen.io/Jhonierpc/pen/MWgBJpy 


HTML : 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Card Hover Effects</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <div class="card">

            <div class="face face1">

                <div class="content">

                    <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/design_128.png?raw=true">

                    <h3>Design</h3>

                </div>

            </div>

            <div class="face face2">

                <div class="content">

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>

                        <a href="#">Read More</a>

                </div>

            </div>

        </div>

        <div class="card">

            <div class="face face1">

                <div class="content">

                    <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/code_128.png?raw=true">

                    <h3>Code</h3>

                </div>

            </div>

            <div class="face face2">

                <div class="content">

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>

                        <a href="#">Read More</a>

                </div>

            </div>

        </div>

        <div class="card">

            <div class="face face1">

                <div class="content">

                    <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/launch_128.png?raw=true">

                    <h3>Launch</h3>

                </div>

            </div>

            <div class="face face2">

                <div class="content">

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>

                        <a href="#">Read More</a>

                </div>

            </div>

        </div>

    </div>

</body>

</html>


CSS : 


body{

    margin: 0;

    padding: 0;

    min-height: 100vh;

    background: #333;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: consolas;

}


.container{

    width: 1000px;

    position: relative;

    display: flex;

    justify-content: space-between;

}


.container .card{

    position: relative;

    cursor: pointer;

}


.container .card .face{

    width: 300px;

    height: 200px;

    transition: 0.5s;

}


.container .card .face.face1{

    position: relative;

    background: #333;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1;

    transform: translateY(100px);

}


.container .card:hover .face.face1{

    background: #ff0057;

    transform: translateY(0);

}


.container .card .face.face1 .content{

    opacity: 0.2;

    transition: 0.5s;

}


.container .card:hover .face.face1 .content{

    opacity: 1;

}


.container .card .face.face1 .content img{

    max-width: 100px;

}


.container .card .face.face1 .content h3{

    margin: 10px 0 0;

    padding: 0;

    color: #fff;

    text-align: center;

    font-size: 1.5em;

}


.container .card .face.face2{

    position: relative;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    box-sizing: border-box;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

    transform: translateY(-100px);

}


.container .card:hover .face.face2{

    transform: translateY(0);

}


.container .card .face.face2 .content p{

    margin: 0;

    padding: 0;

}


.container .card .face.face2 .content a{

    margin: 15px 0 0;

    display:  inline-block;

    text-decoration: none;

    font-weight: 900;

    color: #333;

    padding: 5px;

    border: 1px solid #333;

}


.container .card .face.face2 .content a:hover{

    background: #333;

    color: #fff;

}


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 22회 ]  작성일20-01-10 22:32

웹학교