Project Overview

Card Design with 3D Effects

Project Description

Features of the Enhanced Cyber Card Collection

Three Unique Cyber Cards: Each with a different color scheme (Neon Green, Purple Pink, Blue Cyan)

Interactive 3D Effects: All cards tilt in different directions based on hover position

Consistent Design Language: All cards maintain the cyberpunk aesthetic with glows, particles, and scan lines

Responsive Layout: Cards arrange nicely on all screen sizes Visual Labels: Each card has a label indicating its color theme Synchronized Animations: Animations are slightly staggered for a more dynamic effect

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cyber Card - 3D Effect</title>
 
</head>
<body>
  <div class="cards-wrapper">
    <!-- Card 1 -->
    <div class="container noselect">
      <div class="tracker"></div>
      <div id="card">
        <div class="card-content">
          <p id="prompt">HOVER ME</p>
          <div class="title">CYBER<br/>CARD</div>
          <div class="glowing-elements"><div class="glow-1"></div><div class="glow-2"></div><div class="glow-3"></div></div>
          <div class="subtitle"><span>INTERACTIVE</span> <span class="highlight">3D EFFECT</span></div>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="container noselect">
      <div class="tracker"></div>
      <div id="card">
        <div class="card-content">
          <p id="prompt">HOVER ME</p>
          <div class="title">FUTURE<br/>DESIGN</div>
          <div class="glowing-elements"><div class="glow-1"></div><div class="glow-2"></div><div class="glow-3"></div></div>
          <div class="subtitle"><span>MODERN</span> <span class="highlight">UI</span></div>
        </div>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="container noselect">
      <div class="tracker"></div>
      <div id="card">
        <div class="card-content">
          <p id="prompt">HOVER ME</p>
          <div class="title">NEON<br/>STYLE</div>
          <div class="glowing-elements"><div class="glow-1"></div><div class="glow-2"></div><div class="glow-3"></div></div>
          <div class="subtitle"><span>GLOWING</span> <span class="highlight">EFFECTS</span></div>
        </div>
      </div>
    </div>
    <!-- Card 4 -->
    <div class="container noselect">
      <div class="tracker"></div>
      <div id="card">
        <div class="card-content">
          <p id="prompt">HOVER ME</p>
          <div class="title">TECH<br/>VIBES</div>
          <div class="glowing-elements"><div class="glow-1"></div><div class="glow-2"></div><div class="glow-3"></div></div>
          <div class="subtitle"><span>ANIMATED</span> <span class="highlight">3D</span></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(45deg, #0a0a0a, #1a1a2e);
      font-family: 'Arial', sans-serif;
      overflow-x: hidden;
      padding: 20px;
    }

    /* Cards Wrapper */
    .cards-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      width: 100%;
      max-width: 1000px;
    }

    /* === Card styles same as your original === */
    .container {
      position: relative;
      width: 190px;
      height: 254px;
      transition: 200ms;
      margin: auto;
    }
    .container:active {
      width: 180px;
      height: 245px;
    }
    #card {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      transition: 700ms;
      background: linear-gradient(45deg, #1a1a1a, #262626);
      border: 2px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,0.2);
    }
    .card-content {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #prompt {
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 2px;
      transition: 300ms ease-in-out;
      position: absolute;
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    .title {
      opacity: 0;
      transition: 300ms ease-in-out;
      position: absolute;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 4px;
      text-align: center;
      width: 100%;
      padding-top: 20px;
      background: linear-gradient(45deg, #00ffaa, #00a2ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 15px rgba(0, 255, 170, 0.3));
      text-shadow: 0 0 10px rgba(92,103,255,0.5), 0 0 20px rgba(92,103,255,0.3);
    }
    .subtitle {
      position: absolute;
      bottom: 40px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      letter-spacing: 2px;
      transform: translateY(30px);
      color: rgba(255, 255, 255, 0.6);
    }
    .highlight {
      background: linear-gradient(90deg, #5c67ff, #ad51ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: bold;
    }
    .glowing-elements { position: absolute; inset: 0; pointer-events: none; }
    .glow-1,.glow-2,.glow-3 {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(0,255,170,0.3) 0%, rgba(0,255,170,0) 70%);
      filter: blur(15px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .glow-1{top:-20px; left:-20px;}
    .glow-2{top:50%; right:-30px; transform:translateY(-50%);}
    .glow-3{bottom:-20px; left:30%;}

    .tracker { position:absolute; z-index:200; width:100%; height:100%; }
    .tracker:hover{cursor:pointer;}
    .tracker:hover ~ #card .title {opacity:1; transform:translateY(-10px);}
    .tracker:hover ~ #card .glowing-elements div{opacity:1;}
    .tracker:hover ~ #card #prompt {opacity:0;}
    .tracker:hover ~ #card {transition:300ms; filter:brightness(1.1);}
  </style>

JavaScript

Back to Portfolio

Project Gallery