April 3, 2019

Mouse Over Text Effect HTML CSS in Hindi

Before starting you have to need watch complete video, you can also copy code that I have given below..

HTML


<!DOCTYPE html>
<html>
	<head>
		<title>MOuse Over Text Effect</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
	 <div class="dk">
		<span>D</span>
		<span class="hidden">K</span>
		<span>W</span>
		<span class="hidden">E</span>
		<span class="hidden">B</span>
		<span>T</span>
		<span class="hidden">E</span>
		<span class="hidden">C</span>
		<span class="hidden">H</span>
	 </div>
	</body>
</html>

CSS

body{background:#100c00;}
.dk{
	position:absolute;
	top:40%;
	width:100%;
	color:#fff;
    font-family:"montserrat";
	font-size:5em;
	font-weight:800;
	display:flex;
	justify-content:center;
	}
.hidden{opacity:0; transition:.5s ease-in; max-width:0;}	
.dk:hover .hidden{opacity:1; max-width:1em;}

Mouse Over Text Effect HTML CSS in Hindi

HTML

CSS

About Author

admin

Add a Comment

HTML

CSS

Related Posts

About Author

admin

Add a Comment