Lumina Image | Micro CSS Framework Dashboard

Generated HTML Markup

Active class names

Sandbox Configurator

Preset Recipes

Aspect Ratios (.lum-aspect-*)

Image Filters (.lum-*)

Multi-select allowed (composeable variables!)

Transforms (.lum-*)

Animation Utilities (.lum-animate-*)

Hover Effects (.lum-hover-*)

Object Fit Layout (.lum-fit-*)

Class Explorer

Select from results to apply instantly, or copy class name.

Composeable Filters

Apply blurs, sepia tints, color inversions, brightness adjustments, and neon drop-shadows instantly using fast CSS filters.

GPU-Accelerated

Grayscale Effect

Converts all image color channels into neutral grey intensities.

Classic Sepia

Applies an antique, warm, brownish-gold nostalgia color filter.

Gaussian Blur

Softens the image focus using a lightweight GPU shader blur filter.

High-Contrast Noir

Combines grayscale, reduced brightness, and boosted contrast using CSS variables.

Hover Interactions & Reveals

Add smooth micro-animations on mouse hover or touch activations, including sliding frames, overlays, and fading labels.

350ms Transitions

Scale Zoom

Gently scales the image outward on hover without altering layout boundaries.

Color Reveal

Starts in grayscale, fading back to full color vibrance when hovered.

Modern Architecture

Hover reveals backdrop blurs and typography overlays.

Overlay Blur & Text

Fades in a glassmorphic dark overlay cover exposing readable text on top of the image.

Slide-Up Caption

Slide-up Caption Panel

Slides a solid text panel upward from the bottom frame edge on hover.

3D Perspective & Transforms

Manipulate images in three-dimensional space using tilt properties, rotations, flips, and perspective depth.

1000px Perspective

3D Tilt Left

Rotates the image -22 degrees around the Y axis, producing depth.

3D Tilt Hover Rotation

Tilts the image along both X and Y axes on hover and drops a deep composite shadow.

3D Horizontal Flip

Performs a full 180-degree flip around the vertical axis on hover.

Skew Transformation

Slants the image along the horizontal axis by 12 degrees.

Motion & Timeline Utilities

Add ambient motion, subtle pulse, or cinematic pan effects with class-only animation utilities and timing modifiers.

Class-Only Motion

Ambient Float

A subtle lift cycle for hero images, avatar highlights, and spotlight cards.

Cinematic Cover Motion

Ken Burns Cover

Slow pan + zoom treatment for banners, featured stories, and media headers.

Breathe + Brightness

Gentle pulse for live dashboards, status visuals, and active campaign modules.

Timed Spin (One-shot)

Use timing modifiers to create entrance choreography without writing custom keyframes.

Frame, Overlay, and Loading Helpers

Combine frame presets, overlay variants, image positioning, and skeleton loading states for production-ready UI blocks.

UI Assembly

Glass Frame Preset

A polished frame surface for cards, previews, and visual modules.

Object Position: Top

Object Position Utilities

Anchor focal points without editing source images.

Gradient Brand Overlay

Overlay Position + Theme

Place overlay content in controlled zones with themed tint backgrounds.

Skeleton Loading State

Drop-in shimmer placeholder for async image flows.

Production Use Cases

Practical, copy-ready examples for storefronts, portfolios, team pages, and media-heavy UI surfaces.

Developer Recipes

Quick View

Ecommerce Product Card

Add zoom + quick-view cue on product grids without JavaScript animation code.

Use case: PLP gallery cards

Team Directory Portrait

Start in grayscale and reveal full color on hover for interactive people cards.

Use case: about/team pages

View Case Study

Portfolio Thumbnail

Reveal call-to-action overlay on hover for project grids and case-study collections.

Use case: agency portfolios

Editorial Hero Image

Lift visual contrast and brightness for cleaner text legibility over featured imagery.

Use case: blog/article hero

Feature Spotlight Card

Add subtle depth to screenshots and mockups in product feature sections.

Use case: SaaS feature blocks

Marketplace Listing Image

Preserve full product visibility with contain-fit and brighten on hover for higher scanability.

Use case: listing/detail previews

CSS Variable Customizer

Lumina Image uses CSS variables to bind controls. Move these sliders to see how your JavaScript can dynamically set CSS custom properties on `.lum-img`.

Scale (--lum-scale) 1

Rotate Z (--lum-rotate) 0deg

3D Rotate Y (--lum-rotate-y) 0deg

Blur Intensity (--lum-blur) 0px

Grayscale (--lum-grayscale) 0%

Responsive Grid & Aspect Ratios

Arrange images into fluid grids that automatically adjust column numbers based on viewport widths, keeping aspect ratios locked.

CSS Container Queries

Square aspect (1:1)

Video aspect (16:9)

Portrait aspect (3:4)

Responsive Grid Logic: Grids are styled using display: grid and grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). This means they automatically drop from 3 columns down to 2 and 1 as the screen narrows, without requiring verbose CSS media query duplicates.

Accessibility & Mobile Performance

Designed with web standards in mind to maintain fast page rendering speeds (Core Web Vitals) and respect user options.

Mobile CPU Optimization

On viewports below 768px, CPU-intensive blurs and complex 3D transformations are overridden. This prevents rendering lag on mobile devices and boosts Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) scores.

Prefers-Reduced-Motion Support

Lumina Image detects the system reduced motion flag. If active, transitions revert instantly (0.001s duration) to prevent motion sickness and respect accessibility guidelines (WCAG 2.3.3).

Touch Gestures Support

Since mouse hover events do not exist natively on touch screens, hover-effects map to :active triggers and support .lum-touch-active toggling to guarantee accessibility across all touch-enabled mobile clients.