[해피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 소스

첨부파일을 다운로드하거나 해당 사이트로 이동하여 확인해 주세요.

 

첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.