Create a Direction Aware Hover Effect Using CSS :has() Selector

[@auxtal]

I wanted a challenge so I replicated this in tailwindcss successfully, it's got some very confusing arbitrary group selectors but it works xD

[@CSSWeekly]

That's impressive! Is the demo public? Can I see it somewhere? 🙂 (I've actually had an idea to publish a video where I recreate this using TailwindCSS-I just haven't gotten around to it yet. 🙂)

Very cool effect and nicely explained. Thank you.

[@CSSWeekly]

Hvala puno, Dalibor! 🙏

[@marcod.643]

Sir, this was a very nice, interesting, new and creative use of the :has selector, thanks for sharing!

[@CSSWeekly]

Thank you so much for your wonderfully warm words, Marco! 🙏

[@Fjonan]

Cool idea and works well but I am pretty sure this will break when the read direction is right-to-left so in this particular case you should use the physical properties instead of the logical ones. Also I think performance wise transitioning the element with transform should be smoother since transform does not force the browser to repaint. And last nitpick 🙈"transition: all" can backfire hard when you accidentally start to transition properties you never planned to transition. That can be both very CPU expensive and hard to debug. Again, I love the idea and the way you implemented it is really clever but I think it can be improved upon 😀

[@CSSWeekly]

Thank you so much for the thoughtful and insightful advice, Fjonan! ❤️ Fair point about the writing mode. I've just tested it out, and it seems to be working well. The initial effect is being transitioned from bottom-right, which should make sense for that direction of languages, while jumping from one item to another works as it should. You're correct about transitioning "transform" and using "transition: all"-I'm now actually thinking about making another video where I outline and fix those mistakes. 🙂

[@Fjonan]

@@CSSWeekly Thanks for checking it out! Great to see that different writing mode is working. Looking forward to the video.

[@CSSWeekly]

Thank *you*! 🙂

[@badcatdesign]

Nice effect 👍 I experimented with also putting some matching color box-shadow on the ::before -- fun!

[@CSSWeekly]

Thanks, I'm glad you like it! 🙏 This is an interesting use case. Thanks for sharing! 🙂

[@AlexandreRGomes]

Man, you videos are amazing! Thanks for all the great work! 👏👏👏👏

[@CSSWeekly]

Thank you so much, Alexandre! I'm delighted to hear this! 🙏

[@thedacian123]

So when I 'am positioning absolute an element ,if it is relative parent has overflow:hidden then when the positioned element is outside it's outside it is parent,that are is not visible.Rigth?

[@CSSWeekly]

Yes, that is correct, Alex. If it's outside of parents' bounds, it won't be visible when overflow is hidden. That's why you see where those elements are when I comment out overflow:hidden.