Create a cool bubble zoom effect with CSS

Рет қаралды 32,821

Күн бұрын

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 KZfaq 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!

Пікірлер: 75

@MyDpop 3 ай бұрын

transition: grid-template-columns 🤯

@LePhenixGD 3 ай бұрын

11:30 Holy cow I didn't knew that track to select the direct previous element!!!

@watchvid 3 ай бұрын

It’s brand new so I wouldn’t use it for another few years

@awara_coder0799 3 ай бұрын

Yya

@nikolaidimentiev9807 3 ай бұрын

best CSS channel i am aware of!!!!

@michaldimitrov3233 3 ай бұрын

I really like the new format. Just quickly dip in and see bits of what is possible works great for me.

@wedepohl 3 ай бұрын

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.

@daveturnbull7221 3 ай бұрын

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 😁

@farhan-app 3 ай бұрын

I’m loving these component tutorials!! PLEASE KEEP IT UP!!!

@meso9497 3 ай бұрын

Next topic: magnifying glass cursor 😃

@clevermissfox 3 ай бұрын

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!!

@reminosouci 2 ай бұрын

It's great to see this... It's the best css tutorial I've ever seen.

@samahgad241 3 ай бұрын

I love it so much,Thanks alot kevein😍

@DevelTime 3 ай бұрын

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.

@brx-hashcode 3 ай бұрын

You’re the king 🤴🏾 of css damn Kevin 🥶

@DasunSenanayake 3 ай бұрын

Thank you Kevin. This is very helpful 🙏

@RobertMcGovernTarasis 3 ай бұрын

Definitely up for more of this style especially if you enjoy it. Good to mix it up :)

@taariqq 3 ай бұрын

Zoran was happy to hear that you recommended his video on fonts.

@deepgread6962 3 ай бұрын

Thank you powell for informative video😊

@marielemaitre5006 3 ай бұрын

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.

@user-dk5ek9nt2m 3 ай бұрын

I actually figured this out while helping my friend on his project. It was and awesome research for it.

@eeee29523 3 ай бұрын

Thanks, really helpful! 😀

@yasinsherif8875 2 ай бұрын

Thank you powell ♥️

@ronendavid8842 3 ай бұрын

Thank you Kevin. very helpful, give us more pls

@craftwithfatima4146 3 ай бұрын

The grid template columns thing blew my mind

@Gemeinzam 3 ай бұрын

Nice to learn from you Thanks alot !

@kiravolvo 3 ай бұрын

love the video. thank you

@krateskim4169 3 ай бұрын

Awesome content

3 ай бұрын

Awesome!

@mushuplatypus 3 ай бұрын

Very nice, thank you

@alanlewis1625 Ай бұрын

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?

@starmadmix9045 3 ай бұрын

damn i learned 2 things from this and this is super cool

@aregawiwelejiorgs1150 3 ай бұрын

amazing

@rajmohan9108 3 ай бұрын

Neat❤

@carolmckay5152 3 ай бұрын

I like it

@emmamwiririza3015 3 ай бұрын

Awesome

@sameneko8979 3 ай бұрын

god level css

@deadlyecho 3 ай бұрын

Can you transition the gap and z-index to get that overlapping thing with flex ? Dunno need to try this...

@ssarosh1 3 ай бұрын

Great 🎉🎉🎉🎉

@k16e 3 ай бұрын

Meet CSS, the programming language for creating cool effects like this one (on the web).

@deatho0ne587 3 ай бұрын

: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.

@punkmonkeyKenpo 3 ай бұрын

how would you get the overlap on the collapse to be reversed? Left most on top. your videos are amazing. thank you.

@o_o_f_c_i4822 3 ай бұрын

Great

@amirmekaiten2784 2 ай бұрын

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 😮

@ricseeds4835 3 ай бұрын

What channels does the CSS king watch? What other resources (books, sites etc) do you use?

@LePhenixGD 3 ай бұрын

1:30 Fun fact: You can use clip-path: circle() in order to create a circle without using the border-radius property

@KevinPowell 3 ай бұрын

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 :)

@markboots_ 3 ай бұрын

then the box-shadow and border would not work properly

@RandomGeometryDashStuff 3 ай бұрын

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?

@JonSanders 3 ай бұрын

This is cool. Although mobile is amazing, it would be so awesome for design stuff if folks only used desktop.

@user-jz4iz2qh9u 3 ай бұрын

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?

@KevinPowell 3 ай бұрын

yeah, I didn't think of that for some reason! But I just tested it, and it doesn't animate.

@markboots_ 3 ай бұрын

unfortunately there is no transition for grid-auto-column

@gudhijagadeeshkumarnaidu4803 3 ай бұрын

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?

@mrxplays4719 2 ай бұрын

Plz do this with flex I am a bit confused with var and grid

@JesseShauffer 3 ай бұрын

I am just wondering when css will replace gsap for all animations?!

@BryceDriesenga 3 ай бұрын

Are there any clever ways to get a count of elements with pure CSS?

@scottborrowman 3 ай бұрын

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?

@KevinPowell 3 ай бұрын

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

@scottborrowman 3 ай бұрын

@@KevinPowell Ah, bummer! I was curious about that which is the reason it was a question and not a statement hah.

@yhtsscienceknowled3915 3 ай бұрын

Do you have a personal website.

@markboots_ 3 ай бұрын

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