Create Image Overlay Effect Using HTML & CSS

Create Image Overlay Effect Using HTML & CSS
161 Views

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>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</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">
</div>

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 
			</h2>
		</div>

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

Apply CSS

First Step: apply css code for the first div.

           .box{
			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