코드랩 레퍼런스

Hover Effect - Left 본문

SAMPLE

Hover Effect - Left

webstoryboy 2018. 2. 1. 20:39

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

left를 이용한 마우스 오버 효과입니다. 마우스 오버하면 왼쪽에서 나오는 이펙트 효과입니다.
<!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;
            align-items: center;
            justify-content: center;
        }

        .box {
            position: relative;
            margin: 10px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            overflow: hidden;
            width: 400px;
            height: 300px;
            border: 7px solid #283593;
        }

        .box img {
            width: 100%;
            display: block;
            position: absolute;
            z-index: 10;
            transition: all 0.35s ease-in-out;
            transform: scale(1);
        }

        .box .info {
            opacity: 0;
            z-index: 20;
            position: absolute;
            left: -100%;
            top: auto;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 13px;
            transition: all 0.35s ease-in-out;
        }

        .box .info h3 {
            font-size: 28px;
        }

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

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

</html>


Share

Ad

Comments