Image Text Overlay: Enhance Readability with CSS Backdrop Filters

Introduction

In this lab, we will be learning about image text overlays using CSS. The purpose of this lab is to teach you how to display text on top of an image with an overlay, making it readable regardless of the background image and color. You will learn how to use the backdrop-filter property to apply a blur and brightness effect to your text, creating a professional and visually appealing design.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 100% positive review rate from learners.

Image Text Overlay

index.html and style.css have already been provided in the VM.

To display text on top of an image with an overlay, use the backdrop-filter property to apply a blur(14px) and brightness(80%) effect. This ensures that the text is readable regardless of the background image and color. Here is an example HTML code:

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

And the corresponding CSS code:

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%);
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Image Text Overlay lab. You can practice more labs in LabEx to improve your skills.