코드랩 레퍼런스

Hover Effect - Opacity 본문

SAMPLE

Hover Effect - Opacity

webstoryboy 2018. 2. 1. 20:30

See the Pen Hover Effect - opacity by Webstoryboy (@webstoryboy) on CodePen.

Opacity를 이용한 마우스 오버 효과입니다. 가장 기본적인 오버 효과입니다.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hover Effect - Opacity</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #1a237e;
        }

        .box-wrap {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            position: relative;
            width: 400px;
            height: 300px;
            border: 7px solid #283593;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
        }

        .box img {
            width: 100%;
        }

        .box .img {}

        .box .info {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }

        .box .info h3 {
            font-size: 28px;
            line-height: 40px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #fff;
        }

        .box:hover .info {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box-wrap">
        <div class="box">
            <div class="img">
                <img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg01.png" alt="hover effect">
            </div>
            <div class="info">
                <h3>타이틀</h3>
                <p>이미지 설명 부분입니다.</p>
            </div>
        </div>
    </div>
</body>

</html>


Share

Ad

Comments