Directional card highlight, need help fixing 2 behaviours.
Following the video about directional navigation menu. I decided to try my hand at directional cards.
Problems:
1. Card does not move to second or third card when first hovered. Only afterwards it will correctly slide.
2. Card does not slide back to first position when mouse leaves cards.
https://www.youtube.com/watch?v=G_h2pGZcOzc
https://codepen.io/23chromosomes/pen/ZEZoMXv
Any help is appreciated.
Kevin Powell
YouTube
Create direction-aware effects using modern CSS
🎓 Did you know I have courses, including several free ones? https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=direction-aware-hover-effect
Modern CSS is opening up some really interesting CSS-only solutions, including directionally-aware effects! In this one, I look at how we can do a directionally-aware hover ef...
24 Replies
I'm not sure if you updated your codepen or not, but the two problems you outlined... I think it all seems to be working fine now?
I did update it, but it's still not working the way I want it to work.
I'm not even sure if it's possible, the thing I want.
When hovering the second card, it doesnt really slide the way it slides if you hover from one card to a other card.
When hovering the 3th card first, the highlight doesnt slide from the first to the 3th card. It only works if hovering a other card first.
Ah, I get it now. Thanks for the video, that helps 🙂 - Thinking quickly I can't think of a good solution. I feel like there is probably a way, at least for the first one. For jumping to or from the 3rd one though, I don't think there is anything we can do really.
Or, simple thing we can do, anyway. Using JS and a pseudo-element it wouldn't be too bad
I have a working version using JavaScript. Was trying to do it with just css.
Most CSS I learned, I learned from your video's. So if you don't know, it's probably not possible with just CSS. At least not for me.
I will use javascript. As it seems to be the better option in this case.
maybe this works for you
https://codepen.io/MarkBoots/pen/KKYRYMN
Currently on phone, seems like that work. Have to check on pc to be sure.
Thanks a lot
no problem, good luck on the project
Oh, I don't have a project. I'm just learning and trying new things.
ah okay, in that case, good luck with learning! 😉 I think it's not to hard to understand, but if you have questions, let me know
Works great!
Should have expected @MarkBoots to have a good solution 😄
This is where something
attr(), but outside of the content property, could be really useful... set the card count or something on each element, and then just have a .card:nth-of-type(attr(data-count):hover ~ highlight { --index: calc(attr(data-count) - 1); or something like that... Not that it's such a big deal with only 3 elements to do it this way, but I've been playing with attr() a bit recently and keep finding places it would be useful 😅
loops, of course, would work here too 😄Mark has already resolved this for you but I just wanted to share a similar thing that I did using :has().
https://codepen.io/cbolson/pen/gOyKLQG
This actually does slightly more than you are looking at (eg. it also marks the "active" item) but the basics are there and might also be of some help.
Will try Kevins idea using atrr later.
I do also like Chris his version.
I keep being positively surprised. Thank you both!
yea i was thinking of using :has aswell, but i'm still a bit hesitant for production
yes, I still haven't used :has() on a live site
I dont think I'm doing it right, since the highlight is not moving.
https://codepen.io/23chromosomes/pen/YzMjWyN
Did I do something wrong?
what kevin mentioned is not possible. Maybe (hopefully) it will be in the future. It doesn't exist yet
also .highlight does not have access to the data attribute of it siblings. I doubt it will ever
Oh thats unfortunate. I had been messing with it for like a hour.
i will try and think of another solution so you wont need to declare it for every child. (maybe there is a way, not sure)
Thank you Mark.
Sorry I wasn't more clear there, I'd meant it would be nice if we could do that :\
Looks like an even better solution (that we can't use yet) will be anchor position though...
https://twitter.com/jh3yy/status/1778747586725236775
jhey ▲🐻🎈 (@jh3yy) on X
The new syntax is this:
ul::after {
position-anchor: var(--anchor); /* anchor-default */
inset:
anchor(top)
anchor(right)
anchor(bottom)
anchor(left);
}
Can't edit the post as soon as it has a reply 🤦♂️ Sorry about that 🙏
Twitter
yea, anchors will bring a lot of joy
That looks really nice. Will probably take a long time before it's a thing you can use in production though.
Browser support and all.
Can make it dynamic using JavaScript for now, so I dont have to write css for each card to set the index:
https://codepen.io/23chromosomes/pen/YzMjWyN
If you guys think of any way to do it without, please let me know. Since I don't like using JavaScript. 😀