Image Hover
Core WordPress images can have a caption below them, but nothing appears over the image on hover. This block reveals a title, text and a “more” link with one of 22 CSS effects — on hover, keyboard focus and (optionally) always on touch screens — with a badge and a whole-image link.
Ready-made patterns
Inserter → Patterns → Moduly.
Selected work
The people behind it
Amara Okafor
Founder & strategy
Leo Martins
Design lead
Priya Shah
Engineering
Twenty-three effects
Hover (or Tab to) each one.
Rise
Rise effect
A short line of text.
Read moreFrame
Frame effect
A short line of text.
Read moreCorners
Corners effect
A short line of text.
Read moreDouble frame
Double frame effect
A short line of text.
Read morePanel
Panel effect
A short line of text.
Read moreSide panel
Side panel effect
A short line of text.
Read morePush
Push effect
A short line of text.
Read moreShutter
Shutter effect
A short line of text.
Read moreCurtain
Curtain effect
A short line of text.
Read moreSweep
Sweep effect
A short line of text.
Read moreCircle
Circle effect
A short line of text.
Read moreCinema
Cinema effect
A short line of text.
Read moreFocus pull
Focus pull effect
A short line of text.
Read moreSpotlight
Spotlight effect
A short line of text.
Read moreTilt
Tilt effect
A short line of text.
Read moreFlip
Flip effect
A short line of text.
Read moreDivide
Divide effect
A short line of text.
Read moreCaption line
Caption line effect
A short line of text.
Read moreColour pop
Colour pop effect
A short line of text.
Read moreDuotone
Duotone effect
A short line of text.
Read moreGlass
Glass effect
A short line of text.
Read moreNeon
Neon effect
A short line of text.
Read moreNone (always shown)
None (always shown) effect
A short line of text.
Read moreShapes and sizes
Circle
Round
Behind the scenes of our autumn shoot.
View project16 : 9
Wide
Behind the scenes of our autumn shoot.
View project3 : 4 · focus top
Tall
Behind the scenes of our autumn shoot.
View projectImage’s own shape
Natural
Behind the scenes of our autumn shoot.
View projectFixed height 240 px · radius 0
Fixed
Behind the scenes of our autumn shoot.
View projectRadius 40 · lift 10 px
Lifts
Behind the scenes of our autumn shoot.
View projectCaption
Left, top
Autumn stories
Behind the scenes of our autumn shoot.
View projectRight, bottom
Autumn stories
Behind the scenes of our autumn shoot.
View projectSolid button · padding 48
Autumn stories
Behind the scenes of our autumn shoot.
View projectOutline button · H2 title
Autumn stories
Behind the scenes of our autumn shoot.
View projectTitle only
Just a title
Badges
Always · top left
Autumn stories
Behind the scenes of our autumn shoot.
View projectOnly on hover · top right
Autumn stories
Behind the scenes of our autumn shoot.
View projectOnly at rest · bottom right · custom colours
Autumn stories
Behind the scenes of our autumn shoot.
View projectColours and timing
Indigo overlay at 80 %
Autumn stories
Behind the scenes of our autumn shoot.
View projectAmber accent frame
Autumn stories
Behind the scenes of our autumn shoot.
View projectWhite panel, dark text
Autumn stories
Behind the scenes of our autumn shoot.
View projectPink duotone
Autumn stories
Behind the scenes of our autumn shoot.
View projectNeon cyan
Autumn stories
Behind the scenes of our autumn shoot.
View projectSlow (1500 ms) curtain, dark panel
Autumn stories
Behind the scenes of our autumn shoot.
View projectAlignment
Aligned left (420 px) with text beside it
Autumn stories
Behind the scenes of our autumn shoot.
View projectLike a core image aligned left, text wraps beside it. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Centred
Autumn stories
Behind the scenes of our autumn shoot.
View projectWide · serif · shadow
Autumn stories
Behind the scenes of our autumn shoot.
View project