Create a cool bubble zoom effect with CSS

preview_player
Показать описание

🔗 Links

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Рекомендации по теме
Комментарии
Автор

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

LePhenixGD
Автор

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

michaldimitrov
Автор

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

clevermissfox
Автор

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 😁

daveturnbull
Автор

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.

wedepohl
Автор

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

reminosouci
Автор

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.

DevelTime
Автор

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

farhan-app
Автор

I love it so much, Thanks alot kevein😍

samahgad
Автор

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.

marielemaitre
Автор

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

taariqq
Автор

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

dkekntm
Автор

Thank you Kevin. very helpful, give us more pls

ronendavid
Автор

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

RobertMcGovernTarasis
Автор

The grid template columns thing blew my mind

craftwithfatima
Автор

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

brx-hashcode
Автор

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?

alanlewis
Автор

Thank you Kevin. This is very helpful 🙏

DasunSenanayake
Автор

Thank you powell for informative video😊

deepgread
Автор

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

deathone