Twitch has Created the Ultimate CSS Hover Effect

Wow, you are so talented, its not funny! Keep it up buddy, amazing stuff!!!

This is really cool. Keep creating more content like this

I can't get to work the background-position and background-size properties in codepen and I don't know why, I have the exact same css lines

Dude, I feel like I’m in a rabbit hole right now.

These videos are so damn good and the way you link another video at the end is just beautiful.

Thank you for all this awesome content, you are providing me with so much inspiration and I can’t thank you enough.

Keep up the awesome work!

why is this video rendered at like 15 fps

Can I use this effect in my live website ?

I really want to do this with 3 of these cards but my js code doesn't work if there are 3 cards. Any help?

counter strike source

Holy fuck

My man out here calling Right Click & Inspect Element "reverse engineering" 😀
I'd actually make the pseudo element 300% as big, so you only have to animate the transform property, which is cheaper than animating the background property. Also, please use double colons for pseudo elements :)

Twitch design: S tier, Twitch platform decisions: D-

just a thought, i guess we don't necessarily need to put `background: linear-gradient(130deg, ....)`, can just write `to bottom right` instead of 130deg

I only briefly touched css years ago for a web design class and i have little intention of doing frontend/design again, but this content is presented well enough to keep me interested still. Props!

Sure you can... But why

CSS is the clunkiest piece of shit ever, and the worst thing to happen to the internet. I sure love my webpage needing to load 30 mb worth of laggy calarts garbage.

TO be perfectly honest - The JS could have easily been three times shorter.

Why does it sound like you recorded the voiceover in the bathroom 🤣

CSS | Fade (Factory New)

All that for something so utterly worthless. No actual usage, slows down the site with useless trash and makes accessibility worse for those with screen-readers. No expression or soul, only "clean" corporate vomit on a corporate site. Why was this recommended to me?
I hope everyone responsible for web 2.0's cancerous bloated frontend is never allowed within 400 feet of a computer. (And backend for that matter, although for different reasons.)

you're showing off CSS transitions and hover effects at 24fps? incredible genius...

looks awful if this is the standard for graphical design no wonder everything looks soul less these days

For years I've been meaning to get into front end development (as a backend guy) but from everything I see it mostly consists of learning odd work arounds to make up for the huge limitations of CSS and to a smaller part JavaScript

This is very cool, but why don't we come up with something better that doesn't require this nonsense.

The only holy grail here is the holy grail of vocal fry.

Horrible to look at that framerate

At least it's better than js hover effects I suppose...

My brain feels a little bigger now

I mean this isn’t that impressive… why is this impressive?

i haven't worked with htnl/any coding language since the late 90's (when i was 10-12 years old), so watching this video, and seeing what you can really do with code on a site, kinda blows my mind. great vid, btw.

This looks utter shit, fuck me.

Nice breakdown/tutorial, but while hand drawn animation can look good at 12fps this doesn't. I highly recommend 30fps or even 60 for this type of content.

how is this in any shape or form considered good?

knowing the current state of software i can bet my left nut it's actually some overly complicated code in a proprietary language translated by a proprietary translator, also in the code i bet theres a comment on a random line no one knows why's there but reads as follow "IDK why this is here but if i remove this, the whole thing breaks"

I have never seen this channel before, I don't code things I haven't since I was attending the art institute for multimedia and web design but I am now subbed cause this seems like the best short tutorials for coding things in CSS than I have ever seen and could come in handy in the future if I need it for something lol

How is this the “holy grail” I feel like that’s extremely over overexaggerate

there is absolutely no point to this at all -- thank god i am not a front end developer -- what an absolute complete waste of time -- if this was my job i would quit and choose to be homeless instead

Not the holy grail. Not difficult to do.

Calling this the Holy Grail is a stretch.

I didn't know this was a tutorial at first (thought it was a documentary about the effects of Twitch website), but I stayed all the way even if I don't plan on coding this.
Thank you for making such concise videos as it really helps people 👍

Please stop making videos in 10 fps.

what exactly are these "Cards" ? i dont see them on twitch. thanks for tutorial, unclear where its used.

It doesn't help that the video has 10fps.

Tip. Use 1ch as margin between spans. This is the width of the character 0.

love watching this in 10fps

This may be the best way I’ve ever seen code explained

When did Morgan Freeman get so good at CSS?

Why do you talk like that? Do you talk like that to irl? It's quite annoying.

...Maybe I should do backend instead.

pls, where can i start to study about frontend?

I'm eager just to try to apply this dotted grid technique to React Native. I've used canvas and drawn it manually in the past but I think this would translate

JS? Unwatchable.