├── index.html
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Awesome Hover Effect + Animated Cursor | Codegrid
8 |
9 |
10 |
11 |
20 |
21 |
55 |
56 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | padding: 0;
4 | cursor: none;
5 | }
6 |
7 | .nav-wrapper {
8 | width: 100%;
9 | height: 100vh;
10 | background: #161616;
11 | }
12 |
13 | nav {
14 | width: 100%;
15 | margin: 0 auto;
16 | text-align: center;
17 | position: absolute;
18 | top: 50%;
19 | }
20 |
21 | .hover-this {
22 | transition: all 0.3s ease;
23 | }
24 |
25 | span {
26 | display: inline-block;
27 | font-family: "Monument Extended";
28 | font-weight: 300;
29 | color: #fff;
30 | font-size: 36px;
31 | text-transform: uppercase;
32 | pointer-events: none;
33 | transition: transform 0.1s linear;
34 | }
35 |
36 | .cursor {
37 | pointer-events: none;
38 | position: fixed;
39 | padding: 0.3rem;
40 | background-color: #fff;
41 | border-radius: 50%;
42 | mix-blend-mode: difference;
43 | transition: transform 0.3s ease;
44 | }
45 |
46 | .hover-this:hover ~ .cursor {
47 | transform: translate(-50%, -50%) scale(8);
48 | }
49 |
50 | @media(min-width: 900px) {
51 | nav {
52 | display: flex;
53 | justify-content: space-around;
54 | }
55 | }
56 |
57 | @media(max-width: 900px) {
58 | nav {
59 | top: 30%;
60 | }
61 |
62 | .hover-this {
63 | width: 100%;
64 | padding: 20px 0;
65 | display: inline-block;
66 | }
67 | }
--------------------------------------------------------------------------------