Explore different image styling with hover and focus states - hover over images, click to focus
Rounded Shadows
Rounded corners with shadow presets that intensify on hover and glow on focus
styling: {
default: { border: { radius: 12 }, shadow: 'md' },
hover: { shadow: 'lg' },
focused: { shadow: 'glow' }
}
Sepia Vintage
Warm sepia tones with aged border - images look like old photographs
styling: {
default: { border: { width: 4, color: '#d4a574', radius: 2 }, shadow: 'md',
filter: { sepia: 0.7, brightness: 0.95, contrast: 1.1 } },
hover: { filter: { sepia: 1, brightness: 1, contrast: 1.2 }, shadow: 'lg' },
focused: { filter: { sepia: 0.8, brightness: 1.05, contrast: 1.15 }, shadow: 'glow' }
}
Grayscale to Color
Images start desaturated and reveal full color on hover and focus
styling: {
default: { border: { radius: 4 }, shadow: 'sm',
filter: { grayscale: 1, brightness: 0.9 } },
hover: { filter: { grayscale: 0, brightness: 1.05 }, shadow: 'lg' },
focused: { filter: { grayscale: 0, brightness: 1.1, contrast: 1.1 }, shadow: 'glow' }
}
Neon Glow
Clean images with electric neon glow on interaction
styling: {
default: { border: { radius: 8 }, shadow: 'none' },
hover: { shadow: '0 0 20px rgba(127, 90, 240, 0.6), 0 0 40px rgba(127, 90, 240, 0.3)' },
focused: { shadow: '0 0 30px rgba(127, 90, 240, 0.8), 0 0 60px rgba(127, 90, 240, 0.4)' }
}
Polaroid
Classic polaroid frame with white border and soft shadow lift on hover
styling: {
default: { border: { width: 8, color: '#f5f5f0', radius: 0 },
borderBottom: { width: 28 }, shadow: 'md' },
hover: { shadow: 'lg' },
focused: { shadow: 'glow' }
}
Film Noir
High contrast black and white with dramatic shadow
styling: {
default: { border: { width: 2, color: '#333', radius: 0 }, shadow: 'lg',
filter: { grayscale: 1, contrast: 1.4, brightness: 0.85 } },
hover: { filter: { grayscale: 1, contrast: 1.6, brightness: 0.9 },
shadow: '0 8px 40px rgba(255,255,255,0.15)' },
focused: { filter: { grayscale: 1, contrast: 1.5, brightness: 1 },
shadow: '0 0 40px rgba(255,255,255,0.2)' }
}