Image with text box

Even more flexibility in content creation

Sprechblase mit dem Wort Info

What is it about?
A clear message despite visual appeal. Images speak emotionally – but without text, interpretation is left to the viewer. Text on the image provides:

  • Context (e.g. ‘Summer festival in the spa gardens’)
  • Orientation (e.g. ‘Way to the viewing platform’)
  • Call to action (e.g. ‘Discover now’, ‘Find out more’)
Glühbirne neben der englischsprachigen Überschrift Good to know

Good to know
The combination of image and text attracts the eye more than text or image alone:

A visual hierarchy is created (image attracts attention, text clarifies)

It is also possible to underlay the element with an svg, see::

Live-Demo

Bewaldete Hügellandschaft mit einem See, einem Schloss an dessen Rand und Bergen im Hintergrund
© Hier steht das Copyright
Kapelle auf einem kleinen Hügel inmitten einer bewaldeten Berglandschaft bei Sonne
© Hier steht ein Copyright
Image with text box
Wiesen und Deich mit Spazierweg bei Sonnenaufgang
© Hier steht ein Copyright
There is a lot of text here. Between toast and keyboard, the office dwarves pondered whether images with text boxes work better when the text is very long, very short, or simply completely absurd. One brave dwarf tried out ‘Click me now!’ in Comic Sans, another wanted everything in rhyme. The intern accidentally pressed F12 and was promoted to developer. Meanwhile, the user scrolled, confused but amused – and that was exactly the goal. After all, who says websites can't be a little silly?

The following elements can be found in the left column

  • Normal image and, in comparison:
  • Image with text box (short text)
  • Image with text box (very long text)

When the hamster decided to become a web designer, he didn't realise how difficult it is to fill text without actually saying anything. But he bravely jumped into the world of dummy text, armed with his coffee cup. He philosophised about the perfect padding, the depth of a drop shadow and why the button label ‘Learn more’ sounds equally boring in every language. Meanwhile, the cat tinkered with the layout and discussed colour harmonies with the parrot. The result was a content universe full of text boxes that say nothing – but look damn stylish.