DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Gallary Neon - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Gallary Neon
sachin007
Jan 26, 2026
6
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="gallery-wrapper"> <h1 class="neon-title">UIBlitz Gallery</h1> <div class="gallery-grid"> <div class="neon-card-photo"> <img src="https://picsum.photos/400/500?random=1" alt="Neon 1"> <div class="photo-overlay"> <span>Future City</span> </div> </div> <div class="neon-card-photo"> <img src="https://picsum.photos/400/500?random=2" alt="Neon 2"> <div class="photo-overlay"> <span>Neural Link</span> </div> </div> <div class="neon-card-photo"> <img src="https://picsum.photos/400/500?random=3" alt="Neon 3"> <div class="photo-overlay"> <span>Void Runner</span> </div> </div> </div> </div>
1
:root { --neon: #00f3ff; } body { background-color: #050505; color: white; font-family: 'Poppins', sans-serif; margin: 0; padding: 50px 20px; } .neon-title { text-align: center; font-size: 3rem; color: var(--neon); text-shadow: 0 0 20px var(--neon); margin-bottom: 50px; text-transform: uppercase; letter-spacing: 5px; } /* Grid Layout */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } /* Photo Card Styling */ .neon-card-photo { position: relative; height: 350px; border-radius: 15px; overflow: hidden; background: #111; border: 2px solid rgba(255, 255, 255, 0.1); /* Initial Neon Shadow */ box-shadow: 0 0 15px rgba(0, 243, 255, 0.2); /* Pulsating & Color Shift Animation */ animation: neon-pulse 3s infinite alternate, color-rotate 8s infinite linear; transition: 0.4s ease; cursor: pointer; } .neon-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; opacity: 0.8; } /* Hover Effect */ .neon-card-photo:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 0 30px var(--neon); border-color: var(--neon); } .neon-card-photo:hover img { transform: scale(1.1); opacity: 1; } /* Overlay Text */ .photo-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); display: flex; align-items: flex-end; } .photo-overlay span { font-size: 1.2rem; font-weight: 600; color: white; text-shadow: 0 0 5px var(--neon); } /* --- ANIMATIONS --- */ @keyframes neon-pulse { from { box-shadow: 0 0 10px var(--neon), inset 0 0 5px var(--neon); } to { box-shadow: 0 0 25px var(--neon), inset 0 0 15px var(--neon); } } @keyframes color-rotate { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!