Kevin Powell - Community•2y ago

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:

Card does not move to second or third card when first hovered. Only afterwards it will correctly slide.
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.

YouTubeKevin Powell

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

CodePenHendrik

Direction-aware Cards CSS effect without :has()

...

Kevin Powell•4/10/24, 2:23 PM

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?

KKevin Powell I'm not sure if you updated your codepen or not, but the two problems you outlin...

Entity808OP•4/10/24, 2:44 PM

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.

Kevin Powell•4/10/24, 3:02 PM

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.

Kevin Powell•4/10/24, 3:02 PM

Or, simple thing we can do, anyway. Using JS and a pseudo-element it wouldn't be too bad

KKevin Powell Or, simple thing we can do, anyway. Using JS and a pseudo-element it wouldn't be...

Entity808OP•4/10/24, 3:05 PM

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.

Entity808OP•4/10/24, 3:06 PM

I will use javascript. As it seems to be the better option in this case.

MarkBoots•4/10/24, 5:22 PM

maybe this works for you
https://codepen.io/MarkBoots/pen/KKYRYMN

Entity808OP•4/10/24, 5:24 PM

Currently on phone, seems like that work. Have to check on pc to be sure.

Thanks a lot

MarkBoots•4/10/24, 5:25 PM

no problem, good luck on the project

Entity808OP•4/10/24, 5:25 PM

Oh, I don't have a project. I'm just learning and trying new things.

MarkBoots•4/10/24, 5:32 PM

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

Entity808OP•4/10/24, 6:03 PM

Works great!

Kevin Powell•4/11/24, 11:32 AM

Should have expected @MarkBoots to have a good solution

This is where something , but outside of the content property, could be really useful... set the card count or something on each element, and then just have a 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 a bit recently and keep finding places it would be useful

Kevin Powell•4/11/24, 11:33 AM

loops, of course, would work here too

Chris Bolson•4/11/24, 4:10 PM

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.

Entity808OP•4/11/24, 6:26 PM

Will try Kevins idea using atrr later.
I do also like Chris his version.
I keep being positively surprised. Thank you both!

CChris Bolson Mark has already resolved this for you but I just wanted to share a similar thin...

MarkBoots•4/11/24, 8:13 PM

yea i was thinking of using :has aswell, but i'm still a bit hesitant for production

MMarkBoots yea i was thinking of using :has aswell, but i'm still a bit hesitant for produc...

Chris Bolson•4/11/24, 8:15 PM

yes, I still haven't used :has() on a live site

KKevin Powell Should have expected @MarkBoots to have a good solution 😄 This is where someth...

Entity808OP•4/13/24, 2:15 PM

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?

CodePenHendrik

Cards with sliding highlight using attr()

...

EEntity808 I dont think I'm doing it right, since the highlight is not moving. https://code...

MarkBoots•4/13/24, 2:21 PM

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

Entity808OP•4/13/24, 2:22 PM

Oh thats unfortunate. I had been messing with it for like a hour.

MarkBoots•4/13/24, 2:23 PM

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)

MMarkBoots i will try and think of another solution so you wont need to declare it for ever...

Entity808OP•4/13/24, 2:26 PM

Thank you Mark.

Kevin Powell•4/13/24, 2:29 PM

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

•

4/12/24, 11:30 AM

KKevin Powell Sorry I wasn't more clear there, I'd meant it would be nice if we could do that ...

MarkBoots•4/13/24, 2:30 PM

yea, anchors will bring a lot of joy

Entity808OP•4/13/24, 2:32 PM

That looks really nice. Will probably take a long time before it's a thing you can use in production though.

Entity808OP•4/13/24, 2:32 PM

Browser support and all.

Entity808OP•4/13/24, 2:47 PM

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.

CodePenHendrik

Cards with sliding highlight using javascript.

...