[해피CGI][cgimall] 카드 유형 마우스 오버 이펙트 cards hover effect
소스를 변경하여 다양하게 응용 가능합니다.
HTML 구조
<div id="cards">
<div class="card">
<div class="card-content">
<div class="card-image">
<i class="fa-duotone fa-apartment"></i>
</div>
<div class="card-info-wrapper">
<div class="card-info">
<i class="fa-duotone fa-apartment"></i>
<div class="card-info-title">
<h3>Apartments</h3>
<h4>Lorem ipsum dolor</h4>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image">
<i class="fa-duotone fa-unicorn"></i>
</div>
<div class="card-info-wrapper">
<div class="card-info">
<i class="fa-duotone fa-unicorn"></i>
<div class="card-info-title">
<h3>Unicorns</h3>
<h4>Lorem ipsum dolor</h4>
.
.
.
CSS 소스
:root {
--bg-color: rgb(20, 20, 20);
--card-color: rgb(23, 23, 23);
}
body {
align-items: center;
background-color: var(--bg-color);
display: flex;
height: 100vh;
justify-content: center;
margin: 0px;
overflow: hidden;
padding: 0px;
}
#cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 916px;
width: calc(100% - 20px);
}
#cards:hover > .card::after {
opacity: 1;
}
.card {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
cursor: pointer;
display: flex;
height: 260px;
flex-direction: column;
position: relative;
width: 300px;
}
.card:hover::before {
opacity: 1;
}
.card::before,
.card::after {
border-radius: inherit;
content: "";
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
transition: opacity 500ms;
width: 100%;
}
.card::before {
background: radial-gradient(
800px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.06),
transparent 40%
);
z-index: 3;
}
.card::after {
background: radial-gradient(
600px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.4),
transparent 40%
);
z-index: 1;
}
.card > .card-content {
background-color: var(--card-color);
border-radius: inherit;
display: flex;
flex-direction: column;
flex-grow: 1;
inset: 1px;
padding: 10px;
position: absolute;
z-index: 2;
}
.
.
.
JS 소스
첨부파일을 다운로드하거나 해당 사이트로 이동하여 확인해 주세요.
첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.
