Hover Gallery — stacks images and reveals each one by hovering the corresponding invisible column over the container.

Requires the HoverGallery JS hook in your app.js:

Hooks.HoverGallery = {
  mounted() {
    const imgs = this.el.querySelectorAll("[data-hg-img]");
    const cols = this.el.querySelectorAll("[data-hg-col]");
    const dots = this.el.querySelectorAll("[data-hg-dot]");
    const show = (i) => {
      imgs.forEach((el, j) => el.style.opacity = j === i ? "1" : "0");
      dots.forEach((el, j) => {
        el.style.opacity = j === i ? "1" : "0.5";
        el.style.width = el.style.height = j === i ? "8px" : "6px";
      });
    };
    cols.forEach((col, i) => col.addEventListener("mouseenter", () => show(i)));
    this.el.addEventListener("mouseleave", () => show(0));
  }
};

Example

<.hover_gallery id="gallery-1" class="aspect-video rounded-xl">
  <:item src="/images/photo1.jpg" alt="Photo 1" />
  <:item src="/images/photo2.jpg" alt="Photo 2" />
  <:item src="/images/photo3.jpg" alt="Photo 3" />
</.hover_gallery>

<%!-- With custom content --%>
<.hover_gallery id="gallery-2" class="h-48 rounded-xl">
  <:item>
    <div class="w-full h-full bg-sky-400 flex items-center justify-center text-white font-bold">A</div>
  </:item>
  <:item>
    <div class="w-full h-full bg-rose-400 flex items-center justify-center text-white font-bold">B</div>
  </:item>
</.hover_gallery>