Displays a text on top of an image using an overlay.

&lt;div>
 &lt;h3 class="text-overlay">Hello, World&lt;/h3>
 &lt;img src="https://picsum.photos/id/1050/1200/800">
&lt;/div>

div {
 position: relative;
}

.text-overlay {
 position: absolute;
 top: 0;
 left: 0;
 padding: 1rem;
 font-size: 2rem;
 font-weight: 300;
 color: white;
 backdrop-filter: blur(14px) brightness(80%);
}

Displays a text on top of an image using an overlay.
<ul>
<li>Use <code class="notranslate">backdrop-filter</code> to apply a <code class="notranslate">blur(14px)</code> and <code class="notranslate">brightness(80%)</code> effect. This makes text readable regardless of background image and color.</li>
</ul>

Image text overlay

Preview

Hello, World

Written by Angelos Chalaris

More like this

Image with text overlay

Image overlay on hover

Style links with no text