ASCII hover effect for WooCommerce product images
Under the pointer the picture turns into text: characters that are as light as the image at that place, drawn from shapes, with no font to download.
Soft-shell headphones
€219
Clear highs and a tight low end, with up to thirty hours on a charge.
Point at the picture. On a touch screen, press and drag.
It is for audiences who know the reference: tech, synths, keyboards, indie games. They will stop and play with it, which is a long time to be looking at a product. Others may just find it odd.
What the sliders do
- Size
- How much of the picture turns into characters. Keep it under half, so the photo remains the subject.
- Strength
- How large the characters are. More strength means fewer rows and bigger letters, and that is more graphic and less recognisable.
Where we started
The values we started this page on: Size 45, Strength 55.
Questions
Does it load a font?
No. The characters are drawn from shapes in the shader, so nothing is downloaded for them.
Does it work on bright photos?
It works best on dark photos, where light characters on dark look the way a terminal does.
More on it
Mouse effects come with Pro. Pro starts at $19 a year. The free plugin has hover morph and the storewide switches.
Get the free plugin

