nuxt-x-cards
Image Filter Card
Before/after image filter showcase card with hover-to-reveal original.
Image Filter Card
The XCardImageFilter component shows a single image in its filtered state by default, then reveals the original on hover. Intended for design system documentation pages or filter showcase sections. All filter presets from FilterValue are supported.
Components
<XCardImageFilter />
<XCardImageFilter
title="Cinematic"
description="High-contrast, slightly desaturated look inspired by cinema color grading."
image-url="/images/sample.jpg"
filter="cinematic"
css-values="contrast(1.1) saturate(0.85) brightness(0.95)"
/>
<!-- Show all filter presets in a grid -->
<XCardGrid :columns="3" gap="md">
<XCardImageFilter
v-for="preset in filterPresets"
:key="preset.filter"
:title="preset.title"
:description="preset.description"
:image-url="previewImage"
:filter="preset.filter"
:css-values="preset.cssValues"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | required | Image URL |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | required | Filter preset to apply |
title | string | required | Filter name or card headline |
description | string | required | Short description of the filter effect |
cssValues | string | required | Raw CSS filter string displayed in a monospace code block |
imageAlt | string | — | Alt text for the image |
loading | 'eager' | 'lazy' | 'lazy' | Native <img> loading hint for the image. |
Behavior: Hovering the image area toggles the filter off to reveal the original. A UBadge in the top-left corner switches between the filter name and "Original" to indicate the current state. Click, Enter, and Space toggle the state for keyboard and touch users. The wrapper has role="button", tabindex="0", and a dynamic aria-label.
AI Context
component: XCardImageFilter
package: "@xenterprises/nuxt-x-cards"
category: MediaCards
use-when: >
Use XCardImageFilter only on design system or documentation pages to
showcase the available cinematic filter presets.
notes:
- Requires imageUrl, filter, title, description, and cssValues
- Hovering reveals the original unfiltered image; click or Enter/Space toggles the state for keyboard/touch users