Posted by admin

Make sure to check out and heart Alvaro's original Codepen, which inspired this video! https://codepen.io/alvaromontoro/pen/yLZVJRR 🔗 Links ✅ Alvaro's Codepen: https://codepen.io/alvaromontoro/pen/yLZVJRR ✅ More of Alvaro's work: https://alvaromontoro.com/blog ✅ Alvaro also makes CSS-only comics! 👉 comiCSS: https://comicss.art/ ✅ My finished version: https://codepen.io/kevinpowell/pen/NWmwYKr ✅ The path editor I used: https://yqnn.github.io/svg-path-editor/ ⌚ Timestamps 00:00 - Introduction 01:16 - Creating the grid 03:20 - Offsetting the middle row 03:50 - Creating the diamond shape 08:10 - Fitting them closer together 10:40 - Animating the clip-path 17:05 - Failed attempt to keep the round corners on hover 18:35 - The z-index “hack” to keep items in front 20:42 - Making the elements fade out on hover 23:18 - Fixing the rounder corners on hover #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!