HTML-CSS: Image text overlay

Last update on March 07 2024 13:21:50 (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--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding declaration -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag for responsive design -->
<title>Using HTML, CSS create display a text on top of an image using an overlay</title><!-- Title of the HTML document -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<div><!-- Opening div tag -->
<h3 class="text-overlay">Hello, World</h3><!-- Heading with class text-overlay -->
<img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg" height="200" width="200"><!-- Image with source URL and dimensions -->
</div><!-- Closing div tag -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML document contains a div element containing a heading and an image.
The heading is styled with the class "text-overlay".
Comments are provided to explain each section of the HTML code, including the purpose of each element and attribute.

CSS Code:

<style> /* Opening style tag for CSS */

div {
  position: relative; /* Set the position of the div relative to its normal position */
}

.text-overlay {
  position: absolute; /* Set the position of the text overlay absolutely */
  top: 0; /* Position the text overlay at the top of its containing element */
  left: 0; /* Position the text overlay at the left of its containing element */
  padding: 1rem; /* Add padding around the text overlay */
  font-size: 2rem; /* Set the font size of the text overlay */
  font-weight: 100; /* Set the font weight of the text overlay */
  color: white; /* Set the color of the text overlay to white */
  backdrop-filter: blur(8px) brightness(80%); /* Apply a backdrop filter to the text overlay */
}

</style> /* Closing style tag */

Explanation:

Comments are provided to explain each section of the CSS code, including the purpose of each rule and its styling effects.
The CSS code defines styles for positioning and styling the text overlay on top of the image.
The position: relative; rule for the div element allows positioning its absolutely positioned child elements relative to it.
The .text-overlay class is styled to position the text absolutely at the top left corner of its containing div element.
Various properties such as padding, font size, font weight, and color are applied to style the text overlay.
The backdrop-filter property is used to apply visual effects like blur and brightness to the text overlay.

HTML-CSS Editor:

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