HTML-CSS: Image text overlay

Last update on May 28 2022 07:25:56 (UTC/GMT +8 hours)

HTML-CSS : Exercise-4 with Solution

Using HTML, CSS create display a text on top of an image using an overlay.

Use backdrop-filter to apply a blur(14px) and brightness(80%) effect. This makes text readable regardless of background image and color.

HTML Code:

Preview:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using HTML, CSS create display a text on top of an image using an overlay</title>
</head>
<body>
<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg" height="200" width="200"></div>

</body>
</html>

CSS Code:

<style> 
 
div {
  position: relative;
}

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

</style>

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

HTML-CSS: Tips of the Day

What is the difference between id and class in CSS, and when should I use them?

Example:

<div id="header_id" class="header_class">
Text
</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5. In CSS there is no "font-color", the style is color so the above should read:

Example:

<div id="header_id" class="header_class">
Text
</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

Ref: https://bit.ly/39Stv4P