 Hi there, my friend and friends. I hope you're doing well. I'm doing fantastic even though I'm fighting a little bit of a cold, so I do apologize for the stuffy voice. But I was mucking around with a few things and I came up with this kind of interesting effect thing. I'm not the first one to do this, but I was playing around with something else and then I thought, wait, will this work? And it does where we can sort of hover on something and then have the two siblings interact. So the big, you know, the one to the right and left are both being influenced by this one in the middle. CSS only, we don't need JavaScript to select the preceding sibling. Also this sort of like fun little animation where it shoots out. It's a bit more of a raw video. We're going to sort of explore this effect in terms of like, here's how I did it all, but definitely it's one for you to take and sort of expand upon and do a better job than I did here. But I want to teach you just how this works and some of the cool features, because there's a few CSS tricks along the way to make all of this work. And so if this sounds interesting to you, then stick around and we're going to be diving into it in one second. But I just want to let you know before we do that that I do have new merch. Here is my style sheet shirt. I also have a grid shirt, a color space shirt, and they're all linked just down below if you're interested in those. If not, you just want to get to the demo while we're doing that right now. So let's dive right into it. So we're going to get started with this, starting with not very much going on. I have a div here with a class of avatars on it. This is what we're going to be using. This could be whatever you need it to be. And then the direct children in there are the things themselves. Now, obviously I don't want my avatars to look like squares that we have here. So I'm going to make them look a little bit better. Just giving them a border radius, a border on them that's white and a bit of a box shadow that is on there. The finished code for this is going to be linked down below if you want to get access to it because following along in a video can be a little bit annoying, but nothing too fancy there. And for the important bits, we will slow this down and write things out a little bit. But you can see I get my circles there. What I'm going to do is come up here on my avatars. So avatars, and that's the parent. If you remember, if we go back here, we have the avatars and then avatar. Honestly, this could probably even be a list, like avatar list. And then this is actually like ULLI. You'd want to think a little bit more about the semantics, but it really depends on the use case that you have and how you're going to be doing this. So I don't want to be too prescriptive on that for this demo that we're looking at right now. And yeah, on the avatars here, we're going to do is we're going to set an avatar size. And I'm doing this as a custom property here. And this might seem a little bit strange, but this value is going to be very useful as we come through and set things up. So then down here, I can say that my width is my var avatar size. And that should get them to be 100 pixels each, which is perfect. And then the other thing that we're going to want to do here is to set an aspect ratio. I don't need this right now of one. And I'm also going to add an object object fit of cover. These two are just sort of like a failsafe in case somebody supplies an image that wouldn't be a perfect square, in which case this is just make sure that everything works and we'll still get a circle instead of some weird overly shape. And then the cover makes sure that the image isn't distorted if it is something. So not necessarily for this demo, but if ever you're doing this, user generated images, whatever, this is just some defensive CSS that we're writing right here. Now let's set up our how we're going to do this. And normally I would actually use a flexbox or something like this. If I just need them go next to one another, but because I want that hover effect where they're sort of overlapping and then not overlapping, I actually think that grid is the easier solution here. So if you don't need that type of effect, maybe just doing flexbox would be fine. But we're going to throw a display grid here. And this is why I actually wanted my avatar size here, because we're going to do let's come here actually and say that my column size is going to be my, I will do a calc. I'm going to say var avatar size divided by two. And I'll move this over just so you can see it a little bit better. But again, the finish code is down below if you do want to reference it. But we're going to have the, as I said calc avatar size divided by two. And why I'm doing that is because then I can say that my grid template columns are going to be a repeat. And I'm going to do 10 for now that we're going to fix this in a second to make it a little bit more adaptable. But we're going to do our var column size. And if I hit that, you'll see that they're actually overlapping each other because the grid that we set up, the column size is half the size of the actual images. So we sort of get this type of thing going on. I'm also exaggerating with more than you'd really have for this type of thing. And maybe they're actually a bit big. Let's drop this down. But the nice thing is if I had changed this, that automatically changes this, which automatically changes this over here. So we can make them a little bit tinier there. I think that makes a bit more sense, maybe 70, you know, not too small for demos. But yeah, we can see them coming in right there. So that's great. And the one issue with this is we do want to use this repeat syntax for this to be able to work. So ideally this number could be adaptable to how many items you have. So I'm actually going to come here to and do an avatar, avatar count. And we're just going to say that it's 10. And then this could be my var avatar count. And it's going to look exactly the same. The advantage of this being a custom property is if I was actually doing this on a live site, I could use, you know, depending on how these images are actually being brought in, but I could get the length of, you know, the array or whatever it is, or I could find out it's easy enough to find out how many of these there are with JavaScript. And then I could update this avatar count with JavaScript super easily because it's a custom property. So even you could, you know, technically leave that blank here and make that the fallback or whatever it is. But setting it this way just makes it really easy with JavaScript to get the right number that's there. So that's why I'm doing that as a custom property. But even if you're not using JavaScript and you're manually doing this, it still makes it easier than like having to look for the repeat. You set your average or count to your avatar size. This is sort of a calculation. You know, don't don't don't change this, right? And I do this a lot actually now with my custom properties where I have like the user settings at the top and then calculation stuff that's happening and then I use my calculation stuff lower down. So having a little comment of like this is calculations, this is user settings or that type of thing can be kind of useful just so people know what they're allowed to play with. But let's get to the fun bits now where we get to animate this a little bit. And the first thing we're going to do, and this is where things are kind of interesting. And I think something that not enough people realize is what we can do is I can do my avatar hover. And this is a hover effect that you could definitely get this to work with touch to depending if these are like interactive elements. I just have them as images right now. So I couldn't even like tab onto them for a for a focus. But let's say these were actually links or something that the user could interact with the touch would work in that case on it. And I could also set this up to work with a focus state as well. But for now, I'm just setting it up this way, because I want to focus on the effect itself. But again, think about how you're going to be using it. If you do want to do something like this, because there's always a bit more consideration, I want to focus on the effect itself in this demo. And then so on my hover here, what we're going to do is we're actually going to come and we're going to change the column size. So we're going to copy this here, I'm going to paste it here. And instead of doing a divided by two, we're going to do multiply by 1.5, let's say, and it's not working because I'm doing that on avatar and not avatars. Let's go and move this up to here. I don't want to change it on my single avatar. I want it for that entire parent, which is the fun part of having the s and the not s. So naming is important. But there we go. We can actually see that when I hover and we're getting it a little bit too big for my demo, because we're getting some horizontal scrolling, but you can see that that's causing them to shoot out because we've changed my column size. So if we come and just do a quick inspect on here and we open up my grid, you can see there's the grid. When I hover, the columns are 105 pixels big. And when I'm off, they're 35 pixels big. So we're modifying the size of the columns. And this is the part that I think most people don't realize is that you can actually do a transition of grid template columns. And let's say 500 milliseconds. And now look at that. Do you know that you can do that? I think some people know that. But I think a lot of people don't realize you can modify or you can transition grid template columns and grid template rows. There are some limitations. I think if you're using FRs to a different unit, it doesn't work or something like that. But in a case like this, it works really well. So that's pretty cool. Now the next fun bit is on the actual individual avatar itself. So what we want to do here is we're going to say avatar hover. And again, if you had focus states or other things like that, you definitely want to take that into account. What you might actually want to do here is link this just really fast here. It could be avatars hover and an avatars focus within. So say like, I can't focus maybe on the avatar itself. But if the elements inside here have a focus state, you'd want this to happen. So if I'm tabbing onto it, or it's a touch event where like somebody can touch to select something and you want it to spread out like this, this focus within would work for both of those use cases. So yeah, I'll leave it like that just so we have that in here, even though it's not doing anything specific in my demo use case, but this would work if it was a larger project. And you'd have the same influence, whether it was a touch event that's gaining focus on something or somebody's actually tabbing through and gaining focus on one of these. And again, then this would be an app, you know, the avatar hover and an avatar focus. In this case, the focus, we can't focus on them because of how we have it set up. But we'll leave it like that for now, just in case you come in and grab this code and use it for something that has links in it or buttons or something. Instead, what we're going to do now is when we do that, let's start off by just saying that we get a scale of we'll do two make it nice and big. So when we hover on one of them, it gets huge, right? What we can do with that to start with is let's come here and we can do a transition to make it nicer and do a scale there and we'll do our 500 milliseconds. And so now when we go on top, when we hover on them, that looks kind of nice. There's this annoying thing with the way they overlap each other here, we could look at fixing that as well as we go through this. For now, I'll do a 1.5 just so now I think we'll stick with the two and I'll look at the solution is I've looked at it in another video recently, but you see when I'm on this one, then I go that way how it waits until the transition is finished before it falls back. So we'll look at a solution to that. It might also fix this where it that whole time actually I have another solution for that one that we'll look at that's a little bit easier. So yeah, kind of cool effect. But now if I'm hovering on, say this one, I actually want the two that are next to it to also grow but to grow by less. And that's where I think some of the fun here is right some of the intrigue. So for that, using CSS only, we can select very easily this an element after an element. So I can say avatar hover plus avatar. So this will select the avatar that comes immediately after. So just to show you, we'll do a scale on it of 1.5. But we're also going to do a border color of lime for now just so we can see that it's really working. So you can see when I'm hovering on this middle one, the one after it is actually getting the lime color on it. I go on this one, it switches, go on that one. So we're always selecting the element that's coming after the one I'm hovering on. How do we do that to the one before though? This used to be something with CSS. There's sort of tricky ways of doing this. So you can actually select every element before something that was I'd say it was a little bit of a hack in a sense. But now what we can do is we can select a single element by saying avatar has plus dot avatar, avatar, avatar hover. So what this is saying is if the avatar, so any of the avatars has a sibling that is directly after it that is being hovered on. Super cool. And for, you know, we'll keep the same styling on there. And now you can see that both the one before and after are getting that green border on there. And they're also increasing in scale. So when I go and I think that's really cool. So what we can do here just to improve this is I'm going to pump up the Z index of the middle one. Z index can be a two, just so the one that we're hovering on actually got to save our CSS to do that. But the one we're hovering on should always be in front. So by changing that Z index, it will fix that problem. And now we have this going on. And I think that's pretty cool. So if we take off this lime color, let's do that, hit save. Now we can see when I do that, it's always the one that we're hovering on that's in front, then the next two are going to be a little bit smaller. And then we go to the regular size. And of course, you could step this out and actually go further back with a little bit more complication in your selectors. But you could definitely do that. And sort of count your way along through something and do range selectors and other stuff to be able to do stuff. But I think that's already pretty neat. The one problem here is when we're hovering on and then we hover off, it sort of has that awkward awkwardness to it a little bit. So what I'm actually going to do is let's come on, not the avatar, we're going to come all the way up to the avatars here, where we're doing the spread animation. And where that spread animation is coming, I'm going to say that we have a transition delay of 500 milliseconds. But I'm not going to have it when we hover on there. So here we're going to do a transition delay of zero milliseconds. And just make sure if you do a transition delay, you cannot put zero. For timing, anything that revolves around timing, you have to have a unit on it. A zero is not always a zero in CSS, even though a lot of the times you can have a unit list one, with animations, transitions, anything with milliseconds, stuff like that, you have to have a unit. So when I have her on it, there's no delay and we grow. There's a bit of a bug there. We'll look at addressing that in a second. But you can see that we're coming and we're growing. But then when I come off, it's going to do that delay here. And then it's going to shrink down because that's 500 milliseconds and then it shrinks. One other advantage or one other advantage, one other thing here is we could do a transition duration of 500 milliseconds here. And then we could use that everywhere that we need it. So var, paste that in. I'm just going to copy this whole thing. And the advantage with this is then we could control because we need this in a bunch of places. So then you're not updating it everywhere. You're updating it in one place and then it will work everywhere at the same time. So there we go. Now there is a few things here. Hover, not hover has has really good support, but it's not perfect. It's not like 91, 92%. I'll put a link in the description to the support table in case you're watching this in the future. But what we could do here is we could actually come in with an at supports. And normally at supports, you can only look for like property value stuff. But at supports, which is a feature query, a lot like a media query, it actually allows us to do selectors now as well. So I can say selector, select or and in the selector we're going to do has and we'll just do a plus star or something. Just because I think if I remember correctly, when you need to have a valid selector here to start with, so we need something inside the has, but you also want to put in a more complicated selector. So something that has like the descending, sibling or whatever, just to make sure that everything here is going to work. You could even bring in like this, you know, you could copy and paste this technically if you wanted to. And then we're just going to move all of that into here. And the reason we're going to do that is because I don't want only this part working and not this part, even though this is a list, so it is possible that this if has isn't supported, the whole thing just fails anyway. So we might not technically need this, but I think it's good practice to use them. So if somebody, you know, if browser support is not a thing, it's only going to highlight the one that we're actually hovering on. But if browser support is a thing, we can hit save on there, then they get it where the middle, you know, the two on the side are also growing. Now, a couple of little things here. Just obviously we're overflowing off the page when I do this. So it you'd probably want to do something where you're keeping that in check just to be careful with it. So a few things I would probably just to start off with, I'd probably be making these a lot smaller to start with. So we'd have something like that. So it's staying within sort of the range, but you might be on a mobile device or something else like that, where you need some horizontal scrolling potentially where you'd want to scroll on stuff like that. So you could on the avatars itself, we're setting up that grid, we could set something up with a max width of say, I don't know, 80 VW, or something like that. And then I'd come here with an overflow X of scroll, or actually we'd use auto, right? Because we don't want auto. And we'd have to let's, is that going to be big enough? It's not, we'll do really get 80 here just to make them bigger. So we actually get some overflow. So then we get our overflow coming this way. Obviously, there's other issues now because of our scaling, we're losing stuff. So I'd probably want some padding on there, padding blocks, so top and bottom, maybe two ram or three ram, something just so when they grow, we still see them. And that would actually work pretty well. The one thing I definitely, we have my shadow that's still coming off the bottom. So you definitely need to play around with that just to make sure you have enough, you'd custom do your scroll bar and other stuff along the way, not zooming in and out, like I'm doing right now. But yeah, something like that, if you needed to, and you're really going with this grow effect, just to be careful with it, throwing that out there. So this isn't perfect. I just thought it'd be cool. I wanted to look at mostly this hover effect, which I thought was kind of fun and explore that with you. And actually, we don't have that issue anymore with the Z index that's kind of funky. I don't think it seems to be working pretty well. So I'm just going to leave it like this, just because the order that they're going in now, I think is working pretty good. So we don't have to worry about weird Z index things of strange overlaps and everything happening, which is great. Do with this, what you will, because it's definitely just sort of like, here's a fun thing that we can do. And I want to leave it a little bit more open for interpretation for you to be able to take this and do more with it and make it more awesome. And because, you know, this specific use case is probably a little bit limited. But something fun you can definitely play around with. And if you enjoyed this style of video where it's maybe a little bit less polish than my other ones, I'm definitely experimenting a little bit with that where it's like, here's this cool thing I found. I just want to talk about it. If you like it, please let me know down in the comments to do more of these. The other videos are definitely not going away. I'm still going to be doing those as well. But if you do like these and you want to see more, a little bit faster, a little bit more focused on like one thing or two things, we looked at a few, I think fun CSS things along the way here. But do let me know if you appreciate this type of content as well. So then I know if I should continue making it or not. And with that, I would like to thank my enablers of awesome Andrew, Simon, Tim, and Johnny, as well as all my other patrons through the monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.