CRD003

Floating Card Hover

A modern 3D floating card effect with smooth hover animations

CSS Effects
Font Awesome Included: This snippet uses Font Awesome icons. The required stylesheet is automatically included at the top of the code block. If you are going to use this snippet in your project, add the stylesheet to your <head>.

Live Preview

Floating Card

Hover me to see the effect

Code

HTML 
<!-- Font Awesome Icons; Make sure to add it in the <head> tag -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
<div class="floating-card">
  <div class="floating-card-content">
    <i class="fas fa-rocket"></i>
    <h3>Floating Card</h3>
    <p>Hover me to see the effect</p>
  </div>
</div>
CSS 
.floating-card {
  width: 300px;
  perspective: 1000px;
}

.floating-card-content {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-radius: 16px;
  padding: 30px;
  color: white;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}

.floating-card-content:hover {
  transform: translateY(-10px) rotateX(10deg) rotateY(10deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.1);
}

.floating-card-content i {
  font-size: 32px;
  margin-bottom: 15px;
  display: block;
  transform: translateZ(20px);
}

.floating-card-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
  transform: translateZ(15px);
}

.floating-card-content p {
  font-size: 16px;
  opacity: 0.9;
  transform: translateZ(10px);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .floating-card-content {
    background: linear-gradient(135deg, #8a3eff, #3a7bd5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }
  
  .floating-card-content:hover {
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.4),
      0 10px 20px rgba(0, 0, 0, 0.2);
  }
}