Create Hover Fading Box Animation Using HTML & CSS

Create Hover Fading Box Animation Using HTML & CSS
153 Views

Wahh, what’s up dude? I am not so well today. But, i thought for a while. I have written some codes. I need to share it with you guys. That is why I am sharing “How to create hover fading box animation using html and css” with you.

Let’s start.

Create Hover Fading Box Animation Using HTML & CSS

Apply HTML Code

First Step: Write Down your HTML structure.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Second Step: Just add some span tag inside a div tag. And add a class inside your div.

<div class="body">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

See? You finished everything of HTML file. Now time to add your css code.

Add CSS Code

First Step: Style your class at first with css code.

.body{
	background-color: #000;
	padding: 15px;
	left: 35%;
	top: 25%;
	position: absolute;	
	width: 300px;
	height: 350px;

}

Second Step: Add code for all span tag.

/* code for second span */
	span:nth-child(2){
		background-color: #fff;
		padding: 15px;
		left: 20%;
		top: 0%;
		position: absolute;	
		width: 300px;
		height: 350px;
		z-index: -1;
	}
	/* code for third span */
	span:nth-child(3){
		background-color: #fff;
		padding: 15px;
		right: 20%;
		top: 0%;
		position: absolute;	
		width: 300px;
		height: 350px;
		z-index: -2;
	}
	/* code for fourth span */
	span:nth-child(4){
		background-color: #fff;
		padding: 15px;
		left: 0%;
		top: 16%;
		position: absolute;	
		width: 300px;
		height: 350px;
		z-index: -3;
	}
	/* code for fifth span */
	span:nth-child(5){
		background-color: #fff;
		padding: 15px;
		left: 0%;
		top: -15%;
		position: absolute;	
		width: 300px;
		height: 350px;
		z-index: -3;
	}

Third Step: Your last step is here. Time to add hover effect on your box. Add see the output.

/* hover effect */
	.body:hover{
		background-color: #000;
		transition: 0.2s;
	}
	.body:hover span:nth-child(2){
		left: 0%;
		transition: 0.7s;
	}
	.body:hover span:nth-child(3){
		right: 0%;
		transition: 0.7s;
	}
	.body:hover span:nth-child(4){
		left: 30%;
		transition: 0.9s;
		opacity: 0;
	}
	.body:hover span:nth-child(5){
		left: -30%;
		transition: 0.9s;
		opacity: 0;
	}

Add? See it on your browser. Is not it amazing baby?

Stay connected with me to get more effect only by using html and css.

Related posts for you

Share Your Opinion With Me