비전공자 개발일기

Create Hover Effect 본문

HTML _CSS

Create Hover Effect

HiroDaegu 2022. 12. 12. 00:50
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CREATE HOVER EFFECT</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li style="--clr: #81ECEC;"><a href="#" data-text="Home">Home</a></li>
        <li style="--clr: #FF7675;"><a href="#" data-text="About">About</a></li>
        <li style="--clr: #55EFC4;"><a href="#" data-text="Services">Services</a></li>
        <li style="--clr: #A29BFE;"><a href="#" data-text="Work">Work</a></li>
        <li style="--clr: #FD79A8;"><a href="#" data-text="Team">Team</a></li>
        <li style="--clr: #FFEAA7;"><a href="#" data-text="Contact">Contact</a></li>
    </ul>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background-color: #FFF;
}

ul li{
    list-style: none;
    text-align: center;
}

ul li a {
    color: #333;
    text-decoration: none;
    font-size: 2em;
    font-weight: 300;
    padding: 5px 20px;
    display: inline-flex;
    letter-spacing: .1em;
    text-transform: uppercase;
}

ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    font-weight: 400;
    text-transform: initial;
    opacity: 0;
    color: #222;
    z-index: -1;
    letter-spacing: 500px;
    transition: letter-spacing .5s;
    font-family: 'Sacramento', cursive;
}

ul li a:hover::before {
    content: attr(data-text);
    left: 50%;
    opacity: 1;
    background-color: var(--clr);
    width: 250vh;
    height: 250vh;
    letter-spacing: 0;
}

ul li:hover a {
    background-color: #333;
    color: var(--clr);
    font-weight: 500;
}

ul:hover > li:not(:hover) {
    opacity: 0;
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Credit Card2  (0) 2022.12.19
Elastic Line Animation  (0) 2022.12.18
Infinite Ticker  (0) 2022.12.10
3D Flip Product Card  (0) 2022.12.05
CSS Tricky Shape  (0) 2022.12.03
'HTML _CSS' Related Articles more