Create Image Overlay Effect Using HTML & CSS

Create Image Overlay Effect Using HTML & CSS

This is really great to make image effect using html and css. Wanna try bro?

Hi guys, welcome back to my blog. In this article I am going to show you How To Create Image Overlay Effect Using HTML & CSS. Let’s start this.

To make this effect, you have to add three classes and one image.

Apply HTML

First Step: Add your HTML structure and save the file as html.

<!DOCTYPE html>


Second Step: Create The First div and add your image.

<div class="box">
		<img src="images/office-381228_960_720.jpg" width="100%" height="auto">

Third Step: So, you have added image. Now add your overlay elements inside this.

               <div class="overlay">
			<h2 class="hello">
				Anup Deb Nath Rinku<br>
				Blogger | Content Writer 

Yeah, we are all done. Time to apply CSS code for this.

Apply CSS

First Step: apply css code for the first div.

			left: 30%;
			top: 20%;
			width: 450px;
			height: 350px;
			position: absolute;
			background-size: contain;
			background-repeat: no-repeat;

Second Step: Add css code for overlay effect.

.overlay {
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  height: 100%;
		  width: 100%;
		  opacity: 0;
		  transition: .5s;
		  background-color: #13b5c5;
.box:hover .overlay {
		  opacity: 1;

Third Step: Apply css code for text.

.hello {
		  color: white;
		  font-size: 20px;
		  position: absolute;
		  top: 40%;
		  left: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  text-align: center;

Do this? We are all done bro. Let’s see it. Run this file on your browser.

Have a nice day.

Related posts for you

Share Your Opinion With Me