Skip to content

Commit 5c70483

Browse files
nandini7637nandini7637
authored
Merge pull request Dezenix#113 from Nidhikumari-4/main
Fullscreen Overlay Navigation with Hover Effect
2 parents 6dce936 + 3e7959f commit 5c70483

File tree

5 files changed

+111
-0
lines changed

5 files changed

+111
-0
lines changed

‎Navbars/Fullscreen_Overlay_Navigation_01/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Fullscreen Overlay Navigation with Hover Effect
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
https://user-images.githubusercontent.com/77065920/150981403-66ddc06d-74e2-4d7e-acff-f156c8d3a649.mp4

‎Navbars/Fullscreen_Overlay_Navigation_01/assets/1.jpg

45.5 KB
Loading

‎Navbars/Fullscreen_Overlay_Navigation_01/assets/2.jpg

45.6 KB
Loading

‎Navbars/Fullscreen_Overlay_Navigation_01/code/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>List-Hover-Effect</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body class="body">
11+
<ul class="Lists">
12+
<li class="list"><a href="#" data-text="Home">Home</a></li>
13+
<li class="list"><a href="#" data-text="About">About</a></li>
14+
<li class="list"><a href="#" data-text="Services">Services</a></li>
15+
<li class="list"><a href="#" data-text="Work">Work</a></li>
16+
<li class="list"><a href="#" data-text="Team">Team</a></li>
17+
<li class="list"><a href="#" data-text="Contact">Contact</a></li>
18+
</ul>
19+
</body>
20+
</html>

‎Navbars/Fullscreen_Overlay_Navigation_01/code/style.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
.body{
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
min-height: 100vh;
11+
overflow: hidden;
12+
font-family: 'Poppins', sans-serif;
13+
}
14+
.list {
15+
position: relative;
16+
text-align: center;
17+
list-style: none;
18+
text-decoration: none;
19+
}
20+
a{
21+
display:inline-block;
22+
color: #333;
23+
text-decoration: none;
24+
font-size: 50px;
25+
padding: 5px 10px;
26+
font-weight: 800;
27+
}
28+
.Lists:hover li a {
29+
color: #0002;
30+
}
31+
.Lists li:hover a {
32+
color: #000;
33+
background: rgba(255,255,255,1);
34+
border-radius: 5px;
35+
}
36+
.Lists li a:hover:before {
37+
content: attr(data-text);
38+
opacity: 1;
39+
left: 50%;
40+
letter-spacing: 10px;
41+
width: 2000px;
42+
height: 2000px;
43+
}
44+
.Lists li a:before {
45+
content: '';
46+
opacity: 0;
47+
position: absolute;
48+
z-index: -2;
49+
transform: translate(-50%,-50%);
50+
display: flex;
51+
justify-content: center;
52+
align-items: center;
53+
font-size: 200px;
54+
color: rgba(0,0,0,.1);
55+
border-radius: 100px;
56+
font-weight: 900;
57+
text-transform: uppercase;
58+
letter-spacing: 300px;
59+
transition: letter-spacing 0.5s,left 0.5s;
60+
}
61+
.Lists .list:nth-child(1) a:before {
62+
background: #81ecec;
63+
}
64+
65+
.Lists .list:nth-child(2) a:before {
66+
background: #ff7675;
67+
}
68+
69+
.Lists .list:nth-child(3) a:before {
70+
background: #55efc4;
71+
}
72+
73+
.Lists .list:nth-child(4) a:before {
74+
background: #a29bfe;
75+
}
76+
77+
.Lists .list:nth-child(5) a:before {
78+
background: #fd79a8;
79+
}
80+
81+
.Lists .list:nth-child(6) a:before {
82+
background: #ffeaa7;
83+
}

0 commit comments

Comments
 (0)