🎨 3D Hover Card Design

This is a solution to the 3D Hover Card Design Challenge. This project showcases a responsive card with dynamic hover effects, rounded borders, and an elegant 3D shadow transition. It is a great example of modern CSS styling and animation techniques.

📋 Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• 👩‍💻 Author
• 🙏 Acknowledgments

---

🌟 Overview

🏆 The challenge

Users should be able to:

• 🖱️ See a smooth lift effect when hovering over the card.
• 🟡 Experience rounded corners on the card that maintain their shape even during hover transitions.
• 🖤 View a realistic 3D shadow effect emphasizing depth.
• 📱 Interact with a fully responsive design.

📸 Screenshot

🔗 Links

• 🚀 Solution URL: click here
• 🌐 Live Site URL: click here

---

🛠️ My process

⚙️ Built with

• 🏗️ Semantic HTML5 markup
• 🎨 CSS custom properties
• ✨ CSS transitions and animations
• 📲 Mobile-first workflow

---

📚 What I learned

This project helped me deepen my understanding of CSS transitions and shadows. Here's an example of how I achieved the hover effect:

.card:hover {
  transform: translateY(-15px);
  box-shadow: 
    10px -10px 20px rgba(0, 0, 0, 0.3),
    -10px 10px 20px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.3);
}

I also learned how to maintain rounded corners for both inner and outer borders during hover transitions.

🔮 Continued development

I plan to:

• 🖼️ Add support for multiple card designs with different shadow effects.
• 📜 Explore JavaScript integrations for dynamic content rendering.
• ♿ Improve accessibility features.

---

📖 Useful resources

• 🖤 MDN Web Docs - CSS box-shadow - This resource helped me understand shadow layering and offsets.
• 🎨 CSS Tricks - Hover Effects - A great article on achieving smooth transitions.

---

👩‍💻 Author

• 🌐 Website - Your Name
• 🧑‍💻 Frontend Mentor - @yourusername
• 🐱 GitHub - @yourusername

---

🙏 Acknowledgments

Thanks to Frontend Mentor for inspiring this project. Special thanks to tutorials and resources from MDN and CSS-Tricks that helped shape this design. 🙌