Create a cool bubble zoom effect with CSS
Vložit
- čas přidán 8. 06. 2024
- Looking to step up your CSS game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ Finished code: codepen.io/kevinpowell/pen/ZE...
⌚ Timestamps
00:00 - Introduction
01:05 - The HTML
01:25 - Basic styling
03:12 - Creating the grid
06:17 - Animating grid-template-columns
09:30 - Scaling up the avatar we hover on
10:45 - Scaling up the next sibling
11:30 - Scaling up the preceding sibling
13:10 - Changing the transition-delay
16:30 - Potential cleaning up you might have to do
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - 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 CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!
transition: grid-template-columns 🤯
11:30 Holy cow I didn't knew that track to select the direct previous element!!!
It’s brand new so I wouldn’t use it for another few years
Yya
best CSS channel i am aware of!!!!
I really like the new format. Just quickly dip in and see bits of what is possible works great for me.
This format really helps me grasp the points you're focusing on Kevin so definitely more please. I think this has a lot of potential for use in a graphical menu system - I need to go have a play around with that idea 😁
Thank you Kevin ... love to see your thought process as you fix the "features" from the initial code. Keep it up ... I would love to see more of this.
Awesome! This reminded me to check on overflow-clip-margin support, I’m so excited for that property!
If anyone’s curious, it’s not supported at all in safari and has partial support everywhere else (supported only when using ‘overflow: clip’ on both axes). Come on safari!!
I’m loving these component tutorials!! PLEASE KEEP IT UP!!!
It's great to see this... It's the best css tutorial I've ever seen.
You really have a talent to put in one not too long video great content, and clearly explained. I don't know if I use the effect as a whole, but learning ingredients is very helpful. Thank you for your work.
I love it so much,Thanks alot kevein😍
Next topic: magnifying glass cursor 😃
You’re the king 🤴🏾 of css damn Kevin 🥶
Thank you Kevin. This is very helpful 🙏
Definitely up for more of this style especially if you enjoy it. Good to mix it up :)
I finally bought your merch! One tee, one tank and a toddler tee for my daughter ^^ we'll match, can't wait to get these in France!
Thanks for the video. These are the kind I prefer, I learn best watching an expert do and explain what's happening.
Thank you Kevin. very helpful, give us more pls
Thanks, really helpful! 😀
Thank you powell ♥️
Thank you powell for informative video😊
Zoran was happy to hear that you recommended his video on fonts.
I actually figured this out while helping my friend on his project. It was and awesome research for it.
Nice to learn from you Thanks alot !
The grid template columns thing blew my mind
love the video. thank you
Awesome content
Very nice, thank you
Hi Kevin, another great video. And yes, that format is really nice. Also, I wonder whether you might do an occasional video relating to web application CSS and techniques. E.g. Forms, displaying data in tables, master -> data drill down?? Just a thought. Your videos are very informative and useful, but there is a heavy leaning toward "marketing" style of web content. An occasional perspective on using modern CSS with a more "application" leaning would be very much appreciated. What do you think?
Awesome!
damn i learned 2 things from this and this is super cool
Can you transition the gap and z-index to get that overlapping thing with flex ? Dunno need to try this...
how would you get the overlap on the collapse to be reversed? Left most on top.
your videos are amazing. thank you.
I like it
amazing
At the end part. When you have the horizontal scrolling, instead of the scroll bar, is it possible to have like an arrow button at the left side of the avatars, and by clicking on it. It will move to the next avatar to the left while the firat avatar on the right will dissappear. and when all avatars are over, to repeat from the 1st avatar ? ... and same for the right side ?
Only because it would look better I think 😮
Awesome
:has(), :where() and :is() are so great and are 100x better than pre-years
transition: grid-template-columns/rows; // Is there any issues with slow down on that like a few of the transitions? Even if it is bad might still use it over a JS solution.
Like this and talking about new things. Stuff in the brain as long as it fits is always nice fallback.
Great 🎉🎉🎉🎉
Neat❤
Great
What channels does the CSS king watch? What other resources (books, sites etc) do you use?
god level css
Meet CSS, the programming language for creating cool effects like this one (on the web).
Hi kevin, I have tried to solve the challenge with the help of column-gap but the problem here is immdiate snap of the animation when my is hover is removed/taken off. How to avoid immediate snapping for the animation I have given to the column-gap property?
01:28 why border-radius:100vw (seems like makes .avatar circle unless avatar width/2 < viewport width)?
also why box-shadow depend on font-size (rem unit) but not border?
Awesome video!
Q: Wouldn’t grid-auto-flow: column and grid-auto-column: var(-column-size) work the same without the hard coded count? Would the transition work on the column size?
yeah, I didn't think of that for some reason! But I just tested it, and it doesn't animate.
unfortunately there is no transition for grid-auto-column
1:30 Fun fact: You can use clip-path: circle() in order to create a circle without using the border-radius property
Yup! Can come in handy, and might even be a bit more descriptive... only issue is you can't have a border with it as well then, or box-shadows, both of which I wanted on these :)
then the box-shadow and border would not work properly
Plz do this with flex
I am a bit confused with var and grid
I am just wondering when css will replace gsap for all animations?!
This is cool. Although mobile is amazing, it would be so awesome for design stuff if folks only used desktop.
Are there any clever ways to get a count of elements with pure CSS?
Do you have a personal website.
I've tried this and the images aren't overlapping
Couldn't you use grid-auto-flow: column; and grid-auto-columns: var(--column-size); so you don't have to worry about the repeat number?
That's a very good point, I should have thought of that 😅 - EDIT: I just tested it, and grid-auto-columns isn't animatable, so it doesn't work
@@KevinPowell Ah, bummer! I was curious about that which is the reason it was a question and not a statement hah.
To bad we can't transition grid-auto-columns: var(--column-size),
In that case we could've used grid-auto-flow: column instead of a fixed avatar-count
hover reminds me of the the mac menu bar
You could do some nicer easing, and have it stretch over more elements, and have something pretty well matched to that I think :)
👍👍👍👍❤❤😍😍
The has selector feels like cheating 😂
In a few years, we might not need JavaScript anymore.
Great stuff... but codepen sucks on an ipad. Its so clunky...
yeah, it's not ideal on touch devices...
So we get 2 stupid ads now before each video . . . 😡
Can. you show how to make the blocking function on a chat app >?
ok but do i need to check @supports(@supports) first 😅