Displaying items by tag: zenCode

Sunday, 11 May 2025 12:36

Burger Menu Animation

This project is a modern and minimal off-canvas menu with a slick animation twist. Click the burger icon and a semi-transparent panel slides in with a smooth, glassy blur effect—perfect for adding a clean mobile or responsive nav to any site.

Each menu link appears with a subtle fade-in and delay, giving the whole experience a polished, intentional feel. Hovering over links dims the others, adding focus and just the right amount of interactivity. And that burger icon? It transforms into a clean “X” when the menu is open—because why not make the details shine?

Built using only HTML, CSS, and a sprinkle of JavaScript, this menu is lightweight, elegant, and super easy to integrate into any project.

Published in Projects
Tagged under
Wednesday, 30 April 2025 13:56

Button Hover Effect

This project is all about giving buttons a bit of character. Instead of just sitting there, these buttons respond to your cursor with smooth, stylish animations that make clicking feel just a little more satisfying.

There are three different button styles here, each with its own unique hover effect - one fills up with a diagonal splash of color, another slides in a bold background from the side, and the third switches colors with a clean fade. It’s a great way to add some subtle interactivity and visual feedback to your site without going over the top.

Built entirely with HTML and CSS, this component is super lightweight and easy to drop into any design where you want your calls-to-action to stand out just a little more

Published in Projects
Wednesday, 30 April 2025 13:52

Flip Cards

This project brings a fun and interactive twist to traditional content cards. Each card has two sides: the front shows a crisp image, and the back reveals extra details with a title, description, and a call-to-action button - all triggered by a smooth 3D flip animation when you hover.

It’s built entirely with HTML and CSS - no JavaScript needed! The effect is clean, responsive, and adds a bit of wow-factor without overwhelming the user. Whether you're presenting game items, services, or portfolio pieces, this flip card layout keeps things engaging and modern.

Sleek borders, a soft blur overlay, and a bold call-to-action make this component perfect for landing pages, galleries, or any section that needs a bit more personality.

Published in Projects
Tagged under
Wednesday, 30 April 2025 13:49

Menu Hover Effect

This is a minimal and stylish horizontal menu with a little interactive magic. On the surface, it’s clean and simple - but hover over any of the links and you’ll see a smooth underline animation that gives the whole thing a modern, polished vibe.

Built using only HTML and CSS, this component keeps things lightweight while still adding personality to your navigation. The red underline slides in from the left and exits to the right, making each interaction feel responsive and intentional.

Perfect for websites that want to keep the UI sharp and professional without going over the top. Whether you’re working on a portfolio, a blog, or a small business site, this menu adds just the right amount of flair.

Published in Projects
Wednesday, 30 April 2025 13:46

Card Hover Effect

This project is a clean and eye-catching way to showcase content with a modern twist. The idea is simple: a set of cards with images that come to life when you hover over them. Each card starts off muted in grayscale, but as soon as your cursor glides over it, the image pops into color, a smooth overlay fades in, and the text content slides up with style.

Built with just HTML and CSS (no JavaScript needed!), this design combines subtle animation with a sleek layout that’s both responsive and engaging. It's great for portfolios, product highlights, team member intros - anything where you want to add a bit of motion and storytelling to your visuals.

Minimalist, stylish, and fully animated on hover - this component adds that extra polish to any section of your site without overcomplicating things.

Published in Projects
Wednesday, 30 April 2025 13:40

Fancy Social Media Buttons

This one’s all about adding a bit of flair to your links! These fancy social media buttons aren’t just clickable - they’re playful, stylish, and animated with care. Whether it’s Facebook, Instagram, TikTok, or YouTube, each icon is wrapped in a modern hover effect that brings the interface to life with smooth transitions and subtle color shifts.

Built with pure HTML and CSS (plus a touch of Bootstrap Icons), this little UI component is great for giving your social links some personality. The clean layout keeps things centered and balanced, while the animated border lines give just enough movement to catch the eye without going overboard.

Perfect for footers, sidebars, or contact sections - basically anywhere you want your social media to pop without screaming for attention.

Published in Projects
Wednesday, 30 April 2025 11:06

Photo Gallery Carousel

Welcome to a smooth and stylish image browsing experience! This photo gallery project is all about keeping things simple, elegant, and user-friendly. Built with HTML, CSS, JavaScript, and Bootstrap, it presents a sleek horizontal carousel where users can enjoy scrolling through high-quality images in a clean layout.

Each image sits inside a responsive card that gently expands on hover - adding a nice interactive touch. Want to take a closer look? Just click any image to see it pop out in a fullscreen overlay, and tap anywhere to return. It’s all about visual storytelling with zero clutter.

Whether you’re showcasing a photography portfolio or just want a cool way to display your favorite shots, this gallery does the job with subtle flair.

Published in Projects
Page 2 of 2