Image Hover Effect — every design
An image with a title, text and link revealed by one of 22 hover effects — then shapes, text position, overlays, colours, type, box styling and finished designs. Hover or Tab to any card; phones show the finished state.
1. Effects — frames, panels and reveals
Hover (or Tab to) each card. On touch screens the finished state is shown.
Rise effect
Overlay fades, text rises.
Frame effect
An inset border closes in.
Corners effect
Brackets draw from two corners.
Double frame
Two borders step in.
Panel effect
A card slides up.
Side panel
Slides in from the left.
Push effect
The photo moves up.
Shutter effect
The overlay drops.
2. Effects — wipes, focus and motion
Hover (or Tab to) each card. On touch screens the finished state is shown.
Curtain effect
Two halves close in.
Sweep effect
A diagonal wipe.
Circle effect
Grows from the centre.
Cinema effect
Letterbox bars.
Focus pull
Blur, then the title lands.
Spotlight effect
A vignette closes in.
Tilt effect
The photo turns.
Flip effect
Text on 3D hinges.
3. Effects — lines, colour and light
Hover (or Tab to) each card. On touch screens the finished state is shown.
Divide effect
The title lifts over a line.
Caption line
Underline, then the text.
Colour pop
Mono to colour.
Duotone effect
A colour wash.
Glass effect
A frosted card.
Neon effect
A glowing edge.
4. Shapes
The image’s own shape, an aspect ratio per device, or a fixed height — with a crop focus.
Own shape
Natural image proportions.
Autumn Edit
Heavyweight fleece in four new colours.
16 : 9
Widescreen crop.
Autumn Edit
Heavyweight fleece in four new colours.
2 : 3 portrait, top focus
A tall card cropped from the top.
Autumn Edit
Heavyweight fleece in four new colours.
Fixed height 240 px
Same height at any width.
Autumn Edit
Heavyweight fleece in four new colours.
5. Text position & link
Horizontal and vertical position, a highlighted word, a call-to-action line with icon and a whole-card link.
Bottom left
Left-aligned at the bottom.
Centred, no description
Just a title with a highlight.
New season
6. Overlay, colours & type
Overlay colour or gradient for normal and hover, opacity, lines colour, panel colour, text colours and typography.
Gradient overlay
Indigo to pink, hover only.
Autumn Edit
Heavyweight fleece in four new colours.
Gold lines
Frames and brackets in gold.
Autumn Edit
Heavyweight fleece in four new colours.
Dark panel
Panel colour + light text.
Autumn Edit
Heavyweight fleece in four new colours.
Serif title
Typography and colours of your own.
Autumn Edit
Heavyweight fleece in four new colours.
Teal duotone
The duotone colour is the overlay colour.
Autumn Edit
Heavyweight fleece in four new colours.
Pink neon
Neon in any colour.
Autumn Edit
Heavyweight fleece in four new colours.
Light overlay, dark text
A white overlay at 80 %.
Autumn Edit
Heavyweight fleece in four new colours.
Slow and filtered
Speed 1200 ms, sepia until hover.
Autumn Edit
Heavyweight fleece in four new colours.
7. Box
Radius, border, shadow and a lift on hover.
Round + lift
Radius 28, shadow, lifts 8 px.
Autumn Edit
Heavyweight fleece in four new colours.
Square, bordered
Radius 0 and a thick border.
Autumn Edit
Heavyweight fleece in four new colours.
Circle
Radius 50 % on a square.
