Image Overlay in HTML and CSS

Hello friends today we are going to create image overlay effects on images. These effects are very useful and used many times and by many websites. Its important because its helps you to make your text very clear and readable by users.

Imagine you have a high contrast HD images which you applied to your document and you are applying some text over the image how it looks just same as given image below:

here you can see we included the image but the text is not much pretty cool. Yes you can say its looking good and readable but what if text will be in some different colors. Any how many cases its doesn't looks good so we use the image overlay effects after that over image and text will be looks like image shared below:

so now we are going to play with the effect from below code.

Note:

here we taken three superheros images. And we are going to add them to our file in background and we write up our text over them.

Html code

<!DOCTYPE html>

<html>

<head>

<title>Image Overlay</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">

</head>

<body>

<div class="container_1">

<div class="content_1">

<h1>Spider Man</h1>

</div>

</body>

</html>

in above HTML code we have taken a two div elements. First one with class named “container_1” and second one with “content_1”. We can see that our content is comes under container that means container is parent element and content is child element. And we connected our external style sheet document under head element. We will insert our image as background under style document.

CSS code

margin: 0;

padding: 0;

}

.container_1{

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

width: 100%;

height: 100vh;

background-image: url("spidy.jpg");

background-size: cover;

background-repeat: no-repeat;

background-color: rgb(0,0,0,.7);

background-blend-mode: overlay;

}

.content_1{

font-size: 50px;

color: #ffffff;

font-family: Bangers;

text-shadow: 5px 5px green;

border-bottom: 5px solid red;

}

here you can see first we fixed the height and width of our container and sets the background image with cover and no-repeat properties.
Background-color and background-blend-mode helps us to create overlay effect to our image. you can read more about CSS-Colors.
Class Content_1 consider all properties related to text.

So after save these files and run them you will get output as below: