Kártyák és dobozok
Lebegő keretes kártyák
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<div class="cards-02">
<article class="card-02">
<div class="card-02-line"></div>
<div class="card-02-header">
<span class="card-02-index">01</span>
<i class="bi bi-grid-3x3-gap"></i>
</div>
<div class="card-02-body">
<span class="card-02-label">01 / DESIGN</span>
<h3>Letisztult<br>formák</h3>
<p>
A kevesebb néha több. Harmonikus térközök,
erős tipográfia és gondosan kialakított részletek.
</p>
</div>
<a href="#" class="card-02-link">
<span>Részletek</span>
<i class="bi bi-arrow-right"></i>
</a>
</article>
<article class="card-02">
<div class="card-02-line"></div>
<div class="card-02-header">
<span class="card-02-index">02</span>
<i class="bi bi-bezier2"></i>
</div>
<div class="card-02-body">
<span class="card-02-label">02 / MOTION</span>
<h3>Élő<br>felületek</h3>
<p>
Finom mozgások és természetes átmenetek,
amelyek nem uralják, hanem kiegészítik a tartalmat.
</p>
</div>
<a href="#" class="card-02-link">
<span>Részletek</span>
<i class="bi bi-arrow-right"></i>
</a>
</article>
<article class="card-02">
<div class="card-02-line"></div>
<div class="card-02-header">
<span class="card-02-index">03</span>
<i class="bi bi-command"></i>
</div>
<div class="card-02-body">
<span class="card-02-label">03 / SYSTEM</span>
<h3>Okos<br>struktúra</h3>
<p>
Átgondolt felépítés, amely egyszerre látványos,
könnyen használható és rugalmasan alakítható.
</p>
</div>
<a href="#" class="card-02-link">
<span>Részletek</span>
<i class="bi bi-arrow-right"></i>
</a>
</article>
</div>
.cards-02 {
width: min(1180px, calc(100% - 30px));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card-02 {
position: relative;
min-height: 430px;
padding: 32px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.11);
border-radius: 4px;
background:
linear-gradient(
155deg,
#111820 0%,
#090d13 70%
);
box-shadow:
0 25px 60px rgba(0,0,0,0.28);
transition:
transform 0.5s ease,
border-color 0.5s ease,
box-shadow 0.5s ease;
}
.card-02:hover {
transform: translateY(-8px);
border-color: rgba(46,204,113,0.45);
box-shadow:
0 35px 75px rgba(0,0,0,0.38),
0 0 35px rgba(46,204,113,0.05);
}
/* felső fényvonal */
.card-02-line {
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 1px;
background: #2ecc71;
box-shadow:
0 0 15px rgba(46,204,113,0.8);
transition:
width 0.6s ease;
}
.card-02:hover .card-02-line {
width: 100%;
}
/* háttér geometria */
.card-02::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
right: -130px;
bottom: -130px;
border: 1px solid rgba(46,204,113,0.08);
border-radius: 50%;
transition:
transform 0.7s ease,
border-color 0.7s ease;
}
.card-02::after {
content: "";
position: absolute;
width: 170px;
height: 170px;
right: -95px;
bottom: -95px;
border: 1px solid rgba(255,255,255,0.035);
border-radius: 50%;
transition:
transform 0.7s ease;
}
.card-02:hover::before {
transform: scale(1.25);
border-color: rgba(46,204,113,0.16);
}
.card-02:hover::after {
transform: scale(1.35);
}
/* fejléc */
.card-02-header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-02-index {
color: rgba(255,255,255,0.28);
font-family: monospace;
font-size: 11px;
letter-spacing: 2px;
}
.card-02-header i {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.09);
color: #2ecc71;
font-size: 17px;
transition:
transform 0.45s ease,
border-color 0.45s ease,
background 0.45s ease;
}
.card-02:hover .card-02-header i {
transform: rotate(90deg);
border-color: rgba(46,204,113,0.35);
background: rgba(46,204,113,0.06);
}
/* tartalom */
.card-02-body {
position: relative;
z-index: 2;
margin-top: auto;
padding-top: 50px;
}
.card-02-label {
display: block;
margin-bottom: 18px;
color: #2ecc71;
font-family: monospace;
font-size: 9px;
letter-spacing: 3px;
}
.card-02 h3 {
margin: 0 0 18px;
color: #ffffff;
font-family: "Bodoni Moda", Georgia, serif;
font-size: 34px;
font-weight: 500;
line-height: 1.05;
}
.card-02 p {
max-width: 300px;
margin: 0;
color: #7d8995;
font-size: 13px;
line-height: 1.8;
}
/* link */
.card-02-link {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30px;
padding-top: 17px;
border-top: 1px solid rgba(255,255,255,0.07);
color: #9ba5ae;
text-decoration: none;
font-size: 11px;
letter-spacing: 1px;
transition:
color 0.3s ease,
border-color 0.3s ease;
}
.card-02-link i {
color: #2ecc71;
transition:
transform 0.35s ease;
}
.card-02-link:hover {
color: #ffffff;
border-color: rgba(46,204,113,0.25);
}
.card-02-link:hover i {
transform: translateX(7px);
}
/* reszponzív */
@media (max-width: 900px) {
.cards-02 {
grid-template-columns: 1fr;
max-width: 520px;
}
}
@media (max-width: 480px) {
.cards-02 {
width: calc(100% - 24px);
}
.card-02 {
min-height: 400px;
padding: 27px;
}
.card-02 h3 {
font-size: 30px;
}
}
document.querySelectorAll(".cards-02").forEach(group => {
group.querySelectorAll(".card-02").forEach(card => {
card.addEventListener("mousemove", event => {
const rect = card.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const moveX = (x / rect.width - 0.5) * 4;
const moveY = (y / rect.height - 0.5) * -4;
card.style.transform =
`translateY(-8px) perspective(1000px) rotateX(${moveY}deg) rotateY(${moveX}deg)`;
});
card.addEventListener("mouseleave", () => {
card.style.transform = "";
});
});
});