This 3D Hover Will Make Your Portfolio Stand Out (Framer Tutorial)

🎓 Framer University: https://frameruni.link/yt 👉 Create a free Framer account: https://framer.university/free-account In this Framer tutorial, you'll learn to create a captivating 3D hover reveal component without coding. I'll guide you through using variants, components, interactions, and variables to build an impressive project card effect. You'll master 3D transforms, hover states, and mobile optimization, adding an eye-catching element to your portfolio that's sure to impress. 👉 Remix the tutorial project: https://framer.university/resources/3d-hover-reveal-component 3D Transforms Crash Course: https://framer.university/lessons/framer-3d Framer Components Masterclass: https://framer.university/lessons/components-masterclass 0:00 - Introduction 0:30 - Project remix 0:52 - Setting up the basic structure 4:10 - Adding 3D to the card 8:07 - Creating a component 10:51 - Mouse enter/leave interactions 12:20 - Working with component variables 16:09 - Changing opacity of other cards on hover 21:17 - Optimizing it for mobile 21:09 - Optimizing for breakpoints using variants 22:34 - Using component variables 25:10 - Additional resources Follow me on: X: https://x.com/learnframer Instagram: https://instagram.com/framer.university