Media Cards
ImageFilter
Before/after image filter showcase card with hover-to-reveal original.
Media Cards
Components built around full-bleed imagery. XCardMedia is for editorial and content grid use; XCardImageFilter is a demonstration component for showcasing the available CSS filter presets.
Components
<XCardImageFilter />
A demonstration card that 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 five filter presets are supported; the cssValues prop documents the raw CSS filter string displayed beneath the image.
<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 five filters 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 | — | Image URL (required) |
imageAlt | string | — | Alt text for the image |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | — | Filter preset to apply (required) |
title | string | — | Filter name or card headline (required) |
description | string | — | Short description of the filter effect (required) |
cssValues | string | — | Raw CSS filter string displayed in a monospace code block (required) |
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.
AI Context
category: MediaCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardImageFilter
use-when: >
Use XCardImageFilter only on design system or documentation pages to
showcase the available cinematic filter presets.
notes:
- XCardImageFilter requires all five props; filter does not accept 'none'
- Hovering reveals the original unfiltered image