비전공자 개발일기

Box Card Hover Effects 본문

HTML _CSS

Box Card Hover Effects

HiroDaegu 2022. 10. 21. 01:51
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>BOX CARD HOVER EFFECT</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <div class="features">
        <div class="feature">
            <a href="#" class="feature-content">
                <strong>Some feature</strong>
                <span>Description of the awesome Feature</span>
            </a>
        </div>
        <div class="feature">
            <a href="#" class="feature-content">
                <strong>Some feature</strong>
                <span>Description of the awesome Feature</span>
            </a>
        </div>
        <div class="feature">
            <a href="#" class="feature-content">
                <strong>Some feature</strong>
                <span>Description of the awesome Feature</span>
            </a>
        </div>
        <div class="feature">
            <a href="#" class="feature-content">
                <strong>Some feature</strong>
                <span>Description of the awesome Feature</span>
            </a>
        </div>
        <div class="feature">
            <a href="#" class="feature-content">
                <strong>Some feature</strong>
                <span>Description of the awesome Feature</span>
            </a>
        </div>
        <div class="feature">
            <a href="#" class="feature-content">
                <strong>Some feature</strong>
                <span>Description of the awesome Feature</span>
            </a>
        </div>
    </div>
</body>
</html>
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #060606;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

*, *::before, *::after {
    box-sizing: border-box;
    position: relative;
}

.features {
    width: 75vw;
    height: 50vh;
    display: grid;
    grid-column-gap: .3rem;
    grid-row-gap: .3rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.feature {
    --x-px: calc(var(--x) * 1px);
    --y-px: calc(var(--y) * 1px);
    --border: 2px;
    background-color: rgba(255, 255, 255, .125);
    border-radius: .5rem;
    overflow: hidden;
}

.feature::before, .feature::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(800px circle at var(--x-px) var(--y-px), rgba(255, 255, 255, .3), transparent 40%);
}

.feature::before {
    z-index: 1;
}

.feature::after {
    z-index: 2;
    opacity: 0;
    transition: opacity .4s ease;
}

.feature:hover::after {
    opacity: 1;
}

.feature-content {
    background-color: #131315;
    border-radius: inherit;
    color: #FFF;
    text-decoration: none;
    z-index: 1;
    position: absolute;
    inset: var(--border);
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: .5rem;
    padding: 0 1rem 0 2rem;
}

.feature-content > strong {
    align-self: self-end;
    font-size: 125%;
}

.feature-content > span {
    opacity: .7;
}
console.clear();
const featureEL = document.querySelector(".features");
const featureELs = document.querySelectorAll(".feature");

featureEL.addEventListener("pointermove", (ev) => {
  featureELs.forEach((ibxs) => {
    const rect = ibxs.getBoundingClientRect();
    ibxs.style.setProperty("--x", ev.clientX - rect.left);
    ibxs.style.setProperty("--y", ev.clientY - rect.top);
  });
});
728x90
LIST

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

Light 3D Cube  (0) 2022.10.24
Candle Animation  (0) 2022.10.22
Task Dashboard  (0) 2022.10.20
Animated BG  (0) 2022.10.18
Circular Progress Bar  (0) 2022.10.17
'HTML _CSS' Related Articles more