ContextQMD
Back to Daisyui

Hover Gallery

packages/docs/src/routes/(routes)/components/hover-gallery/+page.md

5.5.193.5 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

How it works

The first image is visible by default, the other image will create invisible columns and hovering each column, reveals that image. For example, here we have 4 images. Try hovering on each column to see 2nd, 3rd and 4th image.

<div class="flex justify-center not-prose"> <div class="grid *:[grid-area:1/1] rounded-box overflow-hidden"> <figure class="hover-gallery max-w-60"> 
</figure>
<div class="grid grid-cols-3 pointer-events-none font-mono *:to-black/10 *:via-transparent *:from-white/10 *:bg-linear-80 *:grid *:place-content-center text-white text-shadow-lg">
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</div> </div>

~Hover Gallery

Move your mouse on the image horizontally

<figure class="hover-gallery max-w-60"> </figure>
html
<figure class="$$hover-gallery max-w-60">
  
  
  
  
</figure>

~Hover Gallery in a card

<div class="card card-sm bg-base-200 max-w-60 shadow"> <figure class="hover-gallery"> </figure> <div class="card-body"> <h2 class="card-title flex justify-between"> daisyUI Hat <span class="font-normal">$25</span> </h2> <p>High Quality classic cap hat with stitch logo</p> </div> </div>
html
<div class="$$card $$card-sm bg-base-200 max-w-60 shadow">
  <figure class="$$hover-gallery">
    
    
    
    
  </figure>
  <div class="$$card-body">
    <h2 class="$$card-title flex justify-between">
      daisyUI Hat
      <span class="font-normal">$25</span>
    </h2>
    <p>High Quality classic cap hat with stitch logo</p>
  </div>
</div>