Skip to content

Commit b7052e4

Browse files
aayush105aayush105
authored
Merge pull request #963 from Kcode727/hover-gallery
Added Text Hover Gallery
2 parents 147ca58 + 20705d2 commit b7052e4

File tree

4 files changed

+274
-0
lines changed

4 files changed

+274
-0
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
118118
- [Tables](#css-tables)
119119
- [Tabs](#tabs)
120120
- [MakemyTrip](#mmt)
121+
- [Text Hover Gallery](#text-hover-gallery)
121122
- [Text Spoiler Effect](#text-spoiler)
122123
- [Timeline](#timeline)
123124
- [Time Travel](#time-travel)
@@ -341,6 +342,14 @@ Your browser does not support the video tag.
341342

342343
---
343344

345+
## <a id="text-hover-gallery"></a>Badge
346+
347+
[<img src="images/textHoverGallery.gif" height="230" title="Demo">](./Text%20Hover%20gallery/index.html)
348+
349+
**[⬆ back to top](#quick-links)**
350+
351+
---
352+
344353
## <a id="Font"></a>Font-Face (Latin)
345354

346355
[<img src="images/sansfont.png" height="230" title="Demo">](https://yusugomori.com/projects/css-sans/fonts)

‎Text Hover gallery/index.html‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CSS Hover Magic</title>
7+
<style>
8+
:root {
9+
--bg: #f8fafc;
10+
--txt: #1e293b;
11+
--card: #ffffff;
12+
--sh: rgba(0,0,0,0.08);
13+
--accent: #6366f1;
14+
--tog-bg: #cbd5e1;
15+
--handle: #ffffff;
16+
}
17+
[data-theme="dark"] {
18+
--bg: #0f172a;
19+
--txt: #f1f5f9;
20+
--card: #1e293b;
21+
--sh: rgba(0,0,0,0.3);
22+
--accent: #a78bfa;
23+
--tog-bg: #475569;
24+
--handle: #f1f5f9;
25+
}
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
body {
32+
background: var(--bg);
33+
color: var(--txt);
34+
font-family: 'Segoe UI', system-ui, sans-serif;
35+
line-height: 1.6;
36+
transition: all 0.4s ease;
37+
padding: 2rem 1rem;
38+
}
39+
h1 {
40+
text-align: center;
41+
margin-bottom: 2rem;
42+
font-size: 2.5rem;
43+
font-weight: 700;
44+
background: linear-gradient(135deg, var(--accent), #8b5cf6);
45+
-webkit-background-clip: text;
46+
background-clip: text;
47+
color: transparent;
48+
}
49+
.header {
50+
display:flex;
51+
justify-content:space-between;
52+
align-items:center;
53+
flex-wrap:wrap;
54+
gap:1rem;
55+
margin-bottom:2rem;
56+
padding: 0 4rem;
57+
}
58+
.toggle-container {
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
gap: 1rem;
63+
margin-bottom: 3rem;
64+
flex-wrap: wrap;
65+
}
66+
.toggle-wrapper {
67+
display: flex;
68+
align-items: center;
69+
gap: 0.75rem;
70+
font-weight: 500;
71+
font-size: 1rem;
72+
}
73+
.toggle-label {
74+
position: relative;
75+
width: 60px;
76+
height: 32px;
77+
}
78+
.toggle-label input {
79+
opacity: 0;
80+
width: 0;
81+
height: 0;
82+
}
83+
.slider {
84+
position: absolute;
85+
cursor: pointer;
86+
top: 0;
87+
left: 0;
88+
right: 0;
89+
bottom: 0;
90+
background: var(--tog-bg);
91+
transition: 0.4s;
92+
border-radius: 32px;
93+
}
94+
.slider:before {
95+
position: absolute;
96+
content: "";
97+
height: 26px;
98+
width: 26px;
99+
left: 3px;
100+
bottom: 3px;
101+
background: var(--handle);
102+
transition: 0.4s;
103+
border-radius: 50%;
104+
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
105+
}
106+
input:checked + .slider {
107+
background: var(--accent);
108+
}
109+
input:checked + .slider:before {
110+
transform: translateX(28px);
111+
}
112+
.grid {
113+
display: grid;
114+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
115+
gap: 2rem;
116+
max-width: 1200px;
117+
margin: 0 auto;
118+
}
119+
.card {
120+
background: var(--card);
121+
padding: 5rem 5rem;
122+
border-radius: 20px;
123+
box-shadow: 0 10px 30px var(--sh);
124+
text-align: center;
125+
cursor: pointer;
126+
position: relative;
127+
overflow: hidden;
128+
min-height: 120px;
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
font-family: 'Courier New', monospace;
133+
font-size: 2rem;
134+
font-weight: bold;
135+
transition: all 0.3s ease;
136+
border: 1px solid rgba(255,255,255,0.2);
137+
}
138+
.card:hover {
139+
transform: translateY(-8px);
140+
box-shadow: 0 20px 40px var(--sh);
141+
border-color: var(--accent);
142+
}
143+
/* Hide text until hover */
144+
.card > div {
145+
opacity: 0;
146+
transition: opacity 0.3s ease;
147+
}
148+
.card:hover > div {
149+
opacity: 1;
150+
}
151+
/* Typewriter */
152+
.typewriter {
153+
width: 0;
154+
white-space: nowrap;
155+
overflow: hidden;
156+
border-right: 3px solid transparent;
157+
}
158+
.card:hover .typewriter {
159+
width: 11ch;
160+
border-color: var(--txt);
161+
animation: typing 2.5s steps(11) forwards, blink 0.75s infinite;
162+
}
163+
@keyframes typing { from { width: 0; } to { width: 11ch; } }
164+
@keyframes blink { 50% { border-color: transparent; } }
165+
/* Rotate Letters */
166+
.rotate span { display: inline-block; opacity: 0; }
167+
.card:hover .rotate span {
168+
opacity: 1;
169+
animation: rotateLetter 0.8s ease-out forwards;
170+
}
171+
.rotate span:nth-child(n) { animation-delay: calc(0.05s * var(--n)); }
172+
@keyframes rotateLetter {
173+
0% { transform: rotateY(0deg); opacity: 0; }
174+
50% { transform: rotateY(180deg); }
175+
100% { transform: rotateY(360deg); opacity: 1; }
176+
}
177+
/* Bounce */
178+
.bounce span {
179+
display: inline-block;
180+
opacity: 0;
181+
transform: translateY(30px);
182+
}
183+
.card:hover .bounce span {
184+
opacity: 1;
185+
animation: bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
186+
}
187+
.bounce span:nth-child(1) { animation-delay: 0.1s; }
188+
.bounce span:nth-child(2) { animation-delay: 0.15s; }
189+
.bounce span:nth-child(3) { animation-delay: 0.2s; }
190+
.bounce span:nth-child(4) { animation-delay: 0.25s; }
191+
.bounce span:nth-child(5) { animation-delay: 0.3s; }
192+
.bounce span:nth-child(6) { animation-delay: 0.35s; }
193+
@keyframes bounce {
194+
0% { transform: translateY(30px); }
195+
60% { transform: translateY(-10px); }
196+
100% { transform: translateY(0); }
197+
}
198+
/* Slide In */
199+
.slide { opacity: 0; transform: translateX(-50px); }
200+
.card:hover .slide {
201+
opacity: 1;
202+
transform: translateX(0);
203+
transition: all 0.6s ease-out;
204+
}
205+
/* Rainbow */
206+
.rainbow { opacity: 0; }
207+
.card:hover .rainbow {
208+
opacity: 1;
209+
background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
210+
background-size: 400% 400%;
211+
-webkit-background-clip: text;
212+
background-clip: text;
213+
color: transparent;
214+
animation: rainbow 3s linear infinite;
215+
}
216+
@keyframes rainbow {
217+
0% { background-position: 0% 50%; }
218+
100% { background-position: 400% 50%; }
219+
}
220+
/* Pulse */
221+
.pulse { opacity: 0; }
222+
.card:hover .pulse {
223+
opacity: 1;
224+
animation: pulse 1.5s ease-in-out infinite;
225+
}
226+
@keyframes pulse {
227+
0%, 100% { transform: scale(1); }
228+
50% { transform: scale(1.1); }
229+
}
230+
@media (max-width: 768px) {
231+
.grid {
232+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
233+
gap: 1.5rem;
234+
}
235+
h1 { font-size: 2rem; }
236+
body { padding: 1rem; }
237+
}
238+
</style>
239+
</head>
240+
<body>
241+
<div class="header">
242+
<h1> Hover to see the magic </h1>
243+
<div class="toggle-container">
244+
<label class="toggle-wrapper">
245+
<div class="toggle-label">
246+
<input type="checkbox" id="themeToggle" onchange="document.documentElement.setAttribute('data-theme', this.checked ? 'dark' : 'light')">
247+
<span class="slider"></span>
248+
</div>
249+
</label>
250+
</div>
251+
</div>
252+
<div class="grid">
253+
<div class="card"><div class="typewriter">Typewriter</div></div>
254+
<div class="card"><div class="rotate">
255+
<span style="--n:1">R</span><span style="--n:2">o</span><span style="--n:3">t</span><span style="--n:4">a</span><span style="--n:5">t</span><span style="--n:6">e</span>
256+
</div></div>
257+
<div class="card"><div class="bounce">
258+
<span>B</span><span>o</span><span>u</span><span>n</span><span>c</span><span>e</span>
259+
</div></div>
260+
<div class="card"><div class="slide">Slide In</div></div>
261+
<div class="card"><div class="rainbow">Rainbow</div></div>
262+
<div class="card"><div class="pulse">Pulse</div></div>
263+
</div>
264+
</body>
265+
</html>

‎Text Hover gallery/textHoverGallery.gif‎

774 KB
Loading

‎images/textHoverGallery.gif‎

774 KB
Loading

0 commit comments

Comments
 (0)