Displays a text on top of an image using an overlay.
backdrop-filter
to apply a blur(14px)
and brightness(80%)
effect. This makes text readable regardless of background image and color.<div>
<h3 class="text-overlay">Hello, World</h3>
<img src="https://picsum.photos/id/1050/1200/800">
</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%);
}
CSS, Visual
Displays an image with a text overlay.
CSS, Visual
Displays an image overlay effect on hover.
CSS, Visual
Displays the link URL for links with no text.