Hover 3D

The Hover 3D component wraps any content with DaisyUI's hover-3d effect, tilting and rotating the content based on the mouse position to create an interactive 3D feel.

Only put non-interactive content inside the wrapper. If you want the whole card to be clickable, pass an href: option so the wrapper is rendered as an <a> tag (the DaisyUI-recommended approach).

3D Card Hover Effect

Combine daisy_hover with daisy_card and a colored background to build an interactive credit-card-like effect. Pass an href: to make the entire card clickable.

= daisy_hover(href: "#", css: "my-4 mx-2 cursor-pointer") do
  = daisy_card(css: "w-96 bg-black text-white") do |card|
    .flex.justify-between.mb-10
      .font-bold BANK OF ACMEVILLE
      .text-5xl.opacity-10 ❁
    .text-lg.mb-4.opacity-40 0210 8820 1150 0222
    .flex.justify-between
      %div
        .text-xs.opacity-20 CARD HOLDER
        %div VICTOR VON D.
      %div
        .text-xs.opacity-20 EXPIRES
        %div 29/08

3D Hover Image Gallery

Use daisy_hover repeatedly to build an interactive gallery where each image responds to the cursor independently.

Preview

Code

.flex.flex-wrap.justify-center.gap-6.py-4
  - %w[beach desert forest].each do |scene|
    = daisy_hover(css: "block w-60") do
      = daisy_figure(src: image_path("landscapes/#{scene}.jpg"), css: "rounded-2xl overflow-hidden h-40 [&>img]:size-full [&>img]:object-cover")

Basic Hover 3D

3D Card Hover Effect

3D Hover Image Gallery

Docs

Guides

Hero

Daisy