You Need This Hover Effect On Your Site ASAP (CSS / JS)

#tutorial #codepen

Tools used: HTML, CSS, JavaScript

Music Credits:

Track: Light — Land of Fire [Audio Library Release]
Music provided by Audio Library Plus

[Hyperplexed]

A couple of notes:

1. The "card-border" element can actually be replaced with an "::after" pseudo element on the "card" element, removing the need for an extra div.

2. On the "card-content" element, instead of setting the height/width to calc(100% - 2px) and setting a margin of 1px. You can set "position: absolute" and "inset: 1px" and it will achieve the same border effect in a cleaner way.

Learned this after making the vid and have updated the CodePen accordingly.

Thanks for watching!

[arunsp]

Love how you wrote half JS logic only relevant to the current task and changed it later, instead of just writing the final one and going "you will understand this later in this tutorial".

[alexwallsdev]

Watching you create complex design with such ease and explaining each step is very helpful

I would suggest taking your time in some other videos to explain some steps more easily, appreciate the content

Keep it up!

[kithenry]

Man's skill so clean I checked his youtube to find out how long it took him to be this good. Couldn't believe it was 2 years, even when the oldest video on there is from last year. So, went to his codepen, moved to the oldest pen, then looked at the comment section, the date? 6 years. Maan that's quite some time, salute the diligence.... could be longer coz even the oldest pen was top notch. CSS demi god we have here...

[dom]

that's really cool. stuff like makes it feel so much more like a native app than a website I think. also love that the video isn't too long. great job!

[IvanIvanov-epzo]

You can take this further by adding dynamic text-shadow that will change its position relative to the source of light (move your mouse to the right, and the shadow moves to the left), and bumping up the shadow blur the further you go from the center

[AlekEagle]

I really appreciate the small bite sized steps you're able to break everything down into, and instead of showing the end code and saying "we'll get to this later, for now it just exists"

[Sneaadler]

thanks you for shedding a light on this design

[theonly.lightfall]

It's such a beautiful yet simple effect. Thanks for sharing how to make it.

[cantTouch]

all of us trying to center just one div and bro just centered six like it was nothing

[gtfo]

Old school flash effects are back baby!!
Love it :D

[SwaggyProfessor]

For anyone looking to have any interactable elements inside the cards, add "pointer-events: none;" to the "before" and "after" selectors. Otherwise if you have a button inside a card it will not work. Cheers!

[approxahmed]

I have noticed that Windows 10 has a similar effect in its UI and wanted to someday make it on my own, I am learning HTML and CSS (will learn JS after getting more familiar with CSS) currently and maybe in the future I'll do it using them too :)

[skoodath]

These videos are highly addictive and motivating! Great job!

[mayukhchanda]

This is amazing. Thank you. Microsoft uses the same animation for their desktop notifications tiles.

[darkfrontier]

Learned more in 5 minutes than a semester of CS

[themightysapien]

Quick and precise like the way I love it.

[fuzzy-]

That's why I love programming, gives me the same feeling I had when I first saw a magic trick as a kid, then got shown the behind the scenes to it.
I was like "I want to be that smart"

[alexandruboscu]

you just blown my mind, so simple but in the same time, so complex

[Novacification]

You explained it well and the final code is very understandable but I'm not sure I agree that the effect is "pretty simple" :)