HTML Overlay Text on the Image
Introduction
Since people are primarily visual beings, using graphics on your website might help draw in visitors. Infographics, which combine text and pictures to communicate information efficiently, are popular since studies reveal that about 50% of the brain is used for visual processing.
Depending on the circumstances, you may use text overlays over photos on your website to enhance the visual presentation and the overall user experience. Including a headline or text that encourages visitors to take action on website banners or sliders, for example, is an effective way to attract users' attention and communicate the core message as soon as they arrive at the page. Product names, prices, and labels may be overlaid over product photographs on e-commerce websites to assist visitors in rapidly identifying and grasping the tempting things. That is done to help customers make instant purchases.
These examples show how using only HTML and CSS to overlay text over photos may be used for various reasons! We'll discover how to do it step-by-step in this guide. Well, let's get going! HTML To begin, create a new HTML file containing the head and body sections as well as the fundamental structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Overlay with Text</title>
</head>
<body>
</body>
</html>
Make a div in the body section with the class "image-container" and insert an image inside it. After that, create another div and place your text inside it using the class "overlay-text."
<body>
<div class="image-container">
<img src="https://www.tutorialandexample.com/images/logo.png" alt="image">
<div class="overlay-text">Your text here</div>
</div>
</body>
We are aware that a web page most likely won't only have a picture on it in real life. For the sake of simplicity, however, we'll accomplish this in this lesson. It works the same way whether you overlay text over a product picture, banner, or any other image on your website.
Example
HTML
<div class="container">
<img src="img_mountains_wide.jpg" alt="Mountains" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
CSS
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: #333; /* changed text color to a darker shade */
background-color: #f0f0f0; /* added background color */
padding: 20px; /* added padding for better spacing */
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 20px; /* increased distance from bottom */
left: 20px; /* increased distance from left */
font-size: 14px; /* changed font size */
}
/* Top left text */
.top-left {
position: absolute;
top: 20px; /* increased distance from top */
left: 20px; /* increased distance from left */
font-size: 14px; /* changed font size */
}
/* Top right text */
.top-right {
position: absolute;
top: 20px; /* increased distance from top */
right: 20px; /* increased distance from right */
font-size: 14px; /* changed font size */
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 20px; /* increased distance from bottom */
right: 20px; /* increased distance from right */
font-size: 14px; /* changed font size */
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px; /* changed font size */
font-weight: bold; /* added font-weight */
}
Image overlaying is the process of superimposing text or pictures over a base image. One of the easiest methods is to add an image or text overlay using CSS attributes and pseudo-elements.
In summary, the following tools are used to create CSS overlay effects:
- Use the background image and CSS attributes to add an image and create a linear gradient overlay effect.
- Position: left, right, top, bottom, and absolute. Use CSS properties to adjust the overlay picture or text's location.
- To manage the content in the event of a text overlay, use the before and after CSS pseudo-elements in conjunction with the content CSS property.
CSS Positioning Layout Feature
To create overlays on pictures, you must comprehend CSS layout capabilities like relative and absolute placement. This layout feature is handy when dealing with standard elements since it allows you to overlay another element or a box element on top of the picture.
Let's examine one example. An image and some header text are included in a container li element in the following HTML:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay">
<h3>Position absolute: place this heading on top of the image</h3>
</div>
</li>
Every element is, of course, a box arranged according to its appearance in the source code. For example, the code above will show the element before the header content.
Using the CSS position property, we can now override the text element's and its container's regular document flow to change their default placement so that the text appears above the picture in the desired scenario:
.image_wrapper {
position: relative;
}
.overlay {
position: absolute;
left: 0;
top: 0;
}
Employing ImageKit for Text Overlay
With real-time transformation, automated picture and video optimization, and cloud storage capabilities, ImageKit is an image CDN. It offers a simple method of managing and distributing photos for mobile applications and websites. It also functions as a cloud-based DAM system, keeping all your media assets organized and in one area. ImageKit provides the capability to resize, crop, rotate, alter the format of images, add text, and apply image overlays using URL parameters.
More Complex Methods for HTML and CSS Image Overlay
1. How to Use CSS Blend Modes for Transformative Images
Aesthetic overlays on photos may be easily made using CSS blend modes. Various effects, including color tints, gradients, and textures, may be produced by combining the overlay's colors with those of the underlying picture. Using blend modes on an overlay may be shown in this simple way:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; /* Overlay background color */
mix-blend-mode: multiply; /* Blend mode */
}
The overlay in this example is in multiple blend mode, intensifying the overlaid color by multiplying it by the underlying image's color, giving the illusion of darkness.
2. Developing Adaptive Image Overlays
Making your image overlays responsive ensures they appear fantastic across all platforms and screen sizes. Using media queries to reposition and style the image, overlaying it according to varying viewport sizes and percentage-based widths and heights for both elements may be accomplished.
.overlay {
* Other styles */
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.overlay {
* Adjust styles for smaller screens */
}
}
You may design image overlays that work well on various devices by utilizing relative units and changing styles according to the viewport size.