Configure hover effects on product cards and images with 4 effects, a glow effect, and animated borders.
Hover Effects
Scale Theme offers advanced hover effects for product cards and images in collection and grid sections. These effects make the interface more interactive and engaging.
Where Are They Available?
Hover effects are configured per section in sections that display cards or images:
- Featured Collection
- Collection page
- Grid section
- Gallery
- Search results
- Best sellers
- And any section using product cards
4 Hover Effects
| Effect | Description | Look |
|---|---|---|
| None | No hover effect | Static, sober |
| Zoom | Image slightly enlarges | Classic, focus on the product |
| Lift | Entire card lifts with a shadow | Depth, tactile interactivity |
| Tilt | Card tilts in 3D based on cursor position | Premium, "physical card" effect |
, Zoom (enlarged image), Lift (lifted card with shadow), Tilt (3D tilted card))
Intensity
| Setting | Type | Range | Default | Description |
|---|---|---|---|---|
| Intensity | Range | 100-120% | 106% | Effect amplitude (zoom, lift, tilt) |
Intensity controls the effect amplitude:
- 100%: Minimal effect, nearly imperceptible
- 106%: Default effect, subtle but visible
- 120%: Pronounced effect, very visible
Glow Effect
The glow is a luminous effect that follows the mouse cursor on cards. It creates a colored light halo that moves with the mouse, giving a premium and interactive appearance.
Glow Settings
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Enable glow | Checkbox | On/Off | Off | Enables the luminous halo effect |
| Color | Select | Accent 1 / Accent 2 / Foreground | Accent 1 | Halo color |
| Intensity | Select | Subtle / Medium / Strong | Medium | Lighting strength |
Glow Intensity Levels
| Intensity | Description | Ideal For |
|---|---|---|
| Subtle | Faint halo, nearly imperceptible | Elegant stores, luxury |
| Medium | Visible but non-intrusive (default) | General use |
| Strong | Pronounced and highly visible halo | Gaming, tech, strong emphasis |
radial-gradient effect. It is automatically disabled on touch devices (mobile/tablet) where it has no purpose.Hover Border
In addition to the previous effects, you can enable a colored border that appears on hover:
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Hover border | Checkbox | On/Off | Off | Enables an animated border on hover |
| Border color | Select | Glow / Accent 1 / Accent 2 | Glow | Color source |
The Glow option for border color uses the same color as the glow effect, creating visual coherence between the halo and the border.
Recommended Combinations
| Store Type | Hover Effect | Glow | Border | Configuration |
|---|---|---|---|---|
| Luxury / Premium | Lift | Subtle, Accent 1 | Off | Intensity 104% |
| Tech / Gaming | Tilt | Strong, Accent 1 | On (Glow) | Intensity 110% |
| Fashion / Beauty | Zoom | Off | Off | Intensity 108% |
| Minimalist | None | Off | Off | - |
| Creative / Pop | Lift | Medium, Accent 2 | On (Accent 2) | Intensity 106% |
| Standard e-commerce | Lift | Off | Off | Intensity 106% |
Sections with Glow Only (without hover effect)
Some sections like the Gallery don't have the 4 hover effects (zoom, lift, tilt) but still offer the glow and hover border options. This allows adding interactivity to images without changing their size or position.
Performance
| Aspect | Implementation |
|---|---|
| Transform-only | Effects exclusively use transform (no layout reflow) |
| GPU-accelerated | will-change: transform added to hoverable elements |
| Event delegation | A single listener for the entire grid (not one per card) |
| Mobile | Glow and tilt automatically disabled on touch devices |
| Reduced motion | Effects reduced or disabled if prefers-reduced-motion |