 Hi there my friend and friends. The other day somebody on my discord server asked me if I'd ever noticed the hover effect on the window security menu and I'd never even bothered to take a look at it so I decided why not go check it out if it looks cool and yeah that looks pretty cool. So naturally I wanted to see if I could recreate it using HTML and CSS and I figured this one would probably need a little bit of JavaScript as well. So I spent a ton of time trying to get this effect to work and the initial glow where it just moves around and follows the mouse is actually really easy to do but it's that corner effect where the adjacent elements are getting the glow on them as well. That was a little bit trickier and something that I struggled with a little bit. I ended up taking several different solutions. I got something that worked but I wasn't happy with it. I kept hacking away at it. I spent a lot of time on it and then when I was done with it I was super proud of myself. I thought it would make a fantastic video but I shared a preview of it over on Twitter and in my discord and stuff and then somebody said oh that's cool that looks a lot like that effect from that hyper plexed video. Wait what? So naturally I had to go and look and oh yeah there it is. Here we have a multi card spanning hover effect where not only do you have the glow effect that's following your mouse but the border is lighting up on the current card and on the neighboring cards as well despite what you might think. And of course as you'd expect from hyper plexed he did a fantastic job of explaining how to do it. And at first this really sucked. I spent a lot of time working on this though I did have a bit of fun doing it. There was a frustrating experience trying to go through the different iterations to get to where I eventually went and then I had this cool video idea but then I couldn't do the video because I don't want to be copying something else that somebody else already did and probably did better than me. But then I got to thinking a little bit and while I could have just recreated the effect in what 10 minutes watching his video and figuring out how he did it I learned a lot more by trying to do it and failing on my own. And by going through the entire process I also learned like a ton of stuff and like you know I got it working but I wasn't happy with that solution then I tried something else I ran into problems with that and in the end I'm actually really happy that I did it on my own first. And then interestingly enough when I looked at hyper plexed video he took a completely different approach than I did. And then as I mentioned earlier I shared it on Twitter at one point and then to many a fifth of CSS challenges fame took his own approach at doing it and he shared his solution which was actually completely different from both of ours and actually did something I'd never even knew was possible which was really cool and I learned even more from that. And then after deciding I was actually going to make this video where I was going to explore not only how I managed to do it which we're getting to I promise sorry for the long intro. But as I was going through the steps of doing this and breaking down the differences in their approaches to my own I came across another one by Jay and Jay took a different approach as well with four different ways of doing the same thing which is part of the fun of web development and I think something we can learn a lot from. So the reason we have this long intro here is to say this video is not going to be a how to in the classic sense but that first of all the main lesson is that reinventing the wheel is not a waste of time because you can learn a ton from it. And I want to share with you the different approaches that I took to get to my final version the problems I had with the early ones the things that weren't working and all of that. And then once we get to my finished version we're going to compare it to the other peoples and see what they did differently you know maybe get some clever ideas from some of the things they did that work better than my own. And at the end I'd love it if you could let me know in the comments which of the different approaches you actually liked the best. So let's dive into the code and look and we're going to break things down in the different steps I did including the failures like I mentioned. But the very first thing I wanted to do and the first thing when I'm doing anything is going for easy wins. And the easy win for me was the background glow that's on here. And you'll notice it's the same on all of the different cards and it just follows my mouse wherever it is and I just did that by having a background image that's a radial gradient. And the center of the circle would be at the X and the Y there as custom properties and then I just used JavaScript to you know nothing too fancy here to track the positioning of my mouse as it moved around. And the real trick for that was then just on this to only have that show up on hover. And by doing that the only card that will show the glowing effect is the one that we're hovering on. And yeah that actually worked pretty well and I was happy with that and that was that first step down where I was like I'm making great progress here and it's going to be super easy going from this step on. But that things got tricky when I was trying to get that intersection area and I think one of the reasons for that is actually the approach I took here sort of gave me a false sense of how I should have been thinking about this entire thing. So my first idea for this actually I think would have worked. I was just lazy and didn't want to do the math for it because what I was originally thinking was I should just give all of these cards a border and by doing that then I could actually just use a mask to hide the parts of the card I was going over. But just like we saw when I wasn't doing the card hover the issue I ran into here is the way I was tracking my X and the Y position. It's the same on all the cards. So my mask kept like resetting when I'd go on to a second or third card. And that's just because of the way I was tracking this I'm always getting like the top right of whatever card I'm on. But it just meant that it wasn't this like global area that I was masking out. And I think then what I could have done is actually track things more independently instead of tracking them on each one and they wouldn't have run into this problem. So my first thought was actually this one where you can see it's working. And I was really happy with this. I got something that that functioned but I really didn't like my solution here because if we come and take a look at it I have my grid container my grid and then I have my cards on there which you'd expect that's nice and easy. But then when we go all the way down then I did this other grid down here and I have a second grid that's overlaid on top of the first one. And the whole idea with this one is what I'm doing is I'm keeping track of the mouse position. But you'll notice I was doing it separately for the cards themselves and then for the entire border and then I was had different properties going on here which I was sort of over complicating it in that sense because I don't think I needed to bother with that. But the idea was I was had like two separate things going on and if we come and take a look down in my CSS. I had this border mask, which was actually using like a mask here with a radial gradient. Which you can do. I have lots of videos on masking and I knew this was sort of the way I wanted to go and this was a proof of concept more of anything the way I did it. And I'm like because you know duplicating you know having a whole bunch of empty stuff in your HTML is not the way to go. And I knew that but I just wanted a proof of concept that I was pretty sure would work. So here if I actually take this transparent part off of my mask and I just make it white and the color here doesn't matter just about the opacity that's in there. So even if I did read you can see the borders are showing up on all of them. And it's actually sort of fading out a little bit closer to my mouse which is the transparency here. And then I just have I did the same trick I had my grid container hover. So if I hovered on my container, the borders would show up so all my borders turn on as long as I'm hovering on top of the parent. And then I had the mask that was coming here and of course this was set to transparent to parent to hide the bits that I didn't want to actually be showing. There we go transparent spell properly and now you can see that it's working. And the other part that was important here was the pointer events of none just so I can actually like I think it allowed me I think it needed that anyway I put that on there for a reason. Because I think without it yeah without it nothing worked you can see actually the highlight up here in the top corner is showing up and that's just because of the way it was tracking the most position because I had this I was using grid to overlay the two containers. So I was always getting the most position that it was on top of there and that was causing me problems so pointer events none just meant that the most tracking wasn't looking at my border mask at all which was on top and it was causing all of the issues. Now I really wasn't happy with that idea of having to duplicate the HTML and have something like this that seemed really silly and I said well if I'm already using JavaScript I guess the easiest thing to do in this case would actually be not to bother doing that. So you can have this completely empty and have nothing in there and then I could use my JavaScript to come in and actually just add those like add it all in. So for here I get each card I would create a new div and then I had my border container that got created to that had the class grid on it with the border mask. All the things I needed were there so all this extra stuff I was using JavaScript to append it and throw it in there so it is in the DOM but at least you don't have to worry about it when you're writing your HTML. Still though like I was like okay that works but it's a little bit sloppy right. Do I really want to go down that road and at this point I needed to take a break and I think if ever you're trying to do something you're not happy with your solutions and maybe it's just not working at all or you tried something it works but you know there's a better way to do it. Take a break because you get so stuck in how you're trying to do it and that's definitely where I was at that I sort of wasted some time just trying to sort of force things to work. And I took a break and it was the best thing I could have done because when you take a break you come back to it a little bit you're a bit more fresh and you think about the problem a little bit differently sometimes you even think about the solution while you're away. This this time it didn't happen but I came back to what I was working on and I decided the problem that I was doing is I was doing something individual for all of them and it would make much more sense to try and have one global thing that I can move around. But I was struggling with that I was trying a few different things and the positioning and I getting it to be in the right place just was really difficult probably because I didn't know what I was doing and I couldn't come up with a good solution. But then for whatever reason, as it'd be nice if I could still use a gradient with a background image would sort of be the best way to do it I think, but if they all had the same background image. And I was trying to come up with like a masking way. I didn't save this one because it was a disaster but I had like a grid setup where I was trying to use a gradient of a mask to make boxes where I wanted it to show up it was a complete disaster. And then I had this like flash of an old lesson I used to teach back when I was teaching in school. And I was looking through all my files actually to pull out my old hard drive that I backed everything up when I was teaching from a box that I had and I found the file that I was looking for and I'm going to share it with you. And here's the example of what we were working on let me move my face out of the way a little bit and it was this simple thing at the code right here for it where it was to teach students how to come in with background images on things. And so, or here are the flowers on there too. But it was just like make the background of the entire page a seamless repeating pattern, a blue background on this one a green background here, red to blue gradient, an image of a cute cat as the background different things just to get them used to using it and then there was a bonus at the end. And so, you know, it was nothing too fancy. But I just wanted to get through the practice of learning the different background stuff and we'd learned all of this along the way but it was sort of, you know, let's approach your just explore background images a little bit. But the bonus at the end is the fun bit. And so what I would the first part of the bonus is all of the same the same image for all of them. One of the reasons I did this is just to remind people they can use element selectors, instead of having to select everything. Not that it's best practice to select a div and put background images on that but background image we can come on there. And in this case, I had the images and then a dog.jpg and we can get this dog that shows up on all of them but you know, whatever not to not too exciting when you do that. And just because it's a background image or repeats and all of that. But the second part was to give them a background attachment of fixed and this is the fun bit and I came up with this and I added this later on to this lesson because I remember coming across this and being like that's super cool. I want to make sure I'm showing it to my students. So it was background attachment of fixed. And then you get this interesting thing that comes in where it looks like the image is crossing over the different divs. And then this gets even more interesting. If we come in and we add in a background background, got to spell things right background size of cover. And if we do that, like it's one big image shared across the whole thing. Let's make this padding like 200 pixels or something just so you know, you get this and this is the effect that everybody knows with background attachment fixed. And the reason this is working is when you use a background image what's actually happening. Oh, sorry, when you use a background attachment of fixed it's positioning it according to the viewport rather than positioning it according to the div. So these are still two separate background images both positioned basically one on top of each other related to the viewport and it gives you this effect that it's one big image. Effectively it's almost like a window between them all right and if we made this bigger, I don't know 100 pixels between each you still get that same like window defect, which is really cool. And you often see this with one image for this sort of parallax effect, but you don't get it across multiple ones and even on iOS on like Safari and stuff. The positioning of it is the same. The only thing is it won't scroll. They won't be static when you're scrolling the image will scroll off but as far as positioning it the initial positioning of it will actually be the same. If I remember correctly anyway correct me in the comments if I'm wrong but I'm pretty sure I've tested that out positioning is the same it just scrolls off when you scroll. And so with that and remembering this and being like yes I knew I had something like this and it took me a long time to actually find that I probably could have come up with a solution in the amount of time that I ended up digging out that hard drive and remembering when I had it. But with that out of the way I actually came up with a better solution. And so what I did is I came up with this one here where on an after so just on each card after I put in a background image to be a radio gradient and I had it tracking the most position just like we saw before. But and this is the original problem I had and I went through so many different iterations trying to solve this but you'll notice that I'm getting like the same gradient across all of them. And this was the problem is the positioning of that gradient was the same and I get this happening. So when I I'll show you how we did the corner effect after but the problem is well the positioning of its way off because I'm tracking it on my screen right now and instead of on the right spot but. The the issue would be like as it would go into the corner and be highlighting this corner and this corner and this corner over here but by coming and using a background attachment of fixed on here it means the background image even though it's a gradient. It's fixed for all of them to the viewport and this is like just by doing that look it just follows my mouse and it goes across the different elements and it's so cool and I was so excited that this actually worked because I honestly wasn't sure if it would with a radio gradient like this and then I could track this with the X and the Y and it worked perfectly fine and just is super nice so you just track your most position and follow it around. And then to actually just get it to be the corners all I needed to do then is to put it in the back so we can use a Z index of negative one to push it backwards which of course would then make it disappear this is the original glow that we saw before. And then on my inset I just do a negative one or a negative two pixels or however thick I want that border to be. And then you can see it's act two is probably a bit too thick but it gives you an idea and you can see it showing up we'll go back to one. And then the effect actually starts working and you can see that that gradient so it's behind the cards and because it's a background image on the cards I don't have to worry about the empty space in between them without having like you know if we had one big glow then we have to figure out how to hide it in those areas and only have it on the corner. So it's you know this it's the gradient like we saw before it's it's like the big glow but anyway I was super happy that that worked. And at this point I had like a X glow and the Y and X right here then realizing how well this worked I realized I didn't actually need to track and do two different things we could do the entire thing with the same coordinates across both of them so the same you know I don't have to worry about trying to like track different things because everything just use the same positioning and it's a little bit stronger I guess than the windows security one but it worked and I was super happy and that was my solution. So if we just come really quick to look at the JavaScript it's really really simple I'm just tracking the positioning adding pixels to it basically and assigning that to the X and the Y and it works and I'm super happy with it. And then the card hover was that background gradient I ended up using the fixed on this one as well just to get it so I could be using the same thing because basically I have two overlapping gradients at this point and that's why I could use the same gradient the same X and the Y for both of them. So I use the same trick for both this is the background of the card itself that highlights as I'm hovering over and it only shows up to match the way the windows security worked. And then I have the card after that showing up I'm putting it behind instead of negative one so it's sticking out and giving me the border effect. I think right now I always have it tracking it could well I think it's kind of cool that even if I'm off of it it still works. So you could track it like I'm tracking across my whole page probably yeah on my entire document so yeah I'm tracking across the entire document maybe I could just track it if I'm on top of that element or something but the the gist of it is that. But of course that's not the end that's how I got from where I started to where I finished and now let's see these other solutions that other people had as well and we'll start with hyperplex since he's the one who originally did this as far as I know. So here it is and it's the same idea he had a different inspiration but if you watch as he found it on a website and of course the links to all of these code pens and his video will also be linked in the description. But it's the exact same effect and the border radius is here shouldn't cause a problem on mine but the exact same effect going on you'll notice actually it's a little bit thicker here on one side I had the same thing it's just because I am zoomed in a little bit. On code pen because I'm doing that to make the code a little bit bigger and you get fun sub pixel rendering issues when you zoom in on stuff. But yeah let's let's dive in and see how he did it which was actually sort of the idea that I had at the beginning that I just thought would be more complicated than it actually was. So he's tracking things more on each card rather than tracking it like I did where it's like the bigger picture for every single card he's setting a separate X and Y. So the most X and Y for each one of them is actually different whereas for mine it was the same for each one which is why I was running into problems. So if we look in the DevTools really fast here I know it's a little bit small we'll zoom in a little bit but we can see each one of them has separate X and Y so it actually works properly across his. And when I was trying to use the same one that's where I was banging my head against the wall I was getting it where it was not working properly. And again for whatever reason I thought you know this would be more complicated than it was turns out it's really nice and easy and it's a nice clean solution. And other than that actually he followed a similar approach than I did I think he used different gradients he has the gradient here with the Z index of one. He has the before that he has a different gradient on with the Z index of three and then I think he has the content itself. So his does have an extra level of like he has a card and then he has the card content. And he's just using that to be able to layer the different things whereas I have the negatives at index which can technically get you into trouble. Depending on like where you're using things because you could lose it behind another background so maybe this is a little bit cleaner in that sense as well. But it just does mean you need a you know that extra little bit of markup which probably not the end of the world most of the time. But yeah very similar idea we're layering the different things. I think he probably could have got away with having the one of these not being a suit element and just doing it as you know the the inner one just being the gradient on the card itself but it doesn't change anything at the end of the day. I'm I use suit elements on everything so I get why he did it that way. The next one here is to many ease which just blew my mind this is the same type of idea you can see have put in like a different background just so we can see that it works. And I'm going to go use source code on this one which the reason this one was crazy. He did have several different or he had two different ones you can see this one is the hover effect to. And the reason that he had more than one approach on this was just because one of them wasn't cross browser compatible. It would have only worked in Chrome or Chrome name browsers I believe but same idea we're tracking the X and the Y but in this case it was similar to me where we're just doing it for the entire section so as long as we're hovering on the section. So that did mean that they're all getting the same. X and Y so you can see here the X and Y are being tracked a singular one not a different one for each one which is how I was doing it and but different to how hyper plexed had done it. But where the magic of this one happens is this part here with mask composite which I don't even know what that is. You'll see there's a max composite of Zor and then there's a max composite of exclude exclude is the one that is more compatible with other browsers. This one is Chrome only I believe or chromium only and what he actually has is two different gradients on here which is the crazy bit and I honestly didn't even know you could do this make sense I think I even did this I did a whole series of stuff on masks. And so I think I knew you could put two but what he's doing is he's using the same gradient twice but one of them is set to the padding box. And what that means is one of them stops at the padding box and the other one doesn't so if I put the border here at five pixels. The five pixels extra there you can see it's actually making it five pixels bigger. And so this is really what's controlling the size of the the edge and what the exclude here let's turn these off for a second. And we'll see how this works hit run because he doesn't have it auto compiling. It looks like one single gradient but we have two overlapping gradients right now. And what this is doing is it's saying that for we're excluding basically it's only including the overlapped section for I think the first one here which is set to the padding box or vice versa or whatever you know I have to play around with this a little bit more. But basically it's tracking around and it's only showing us the outer area where these are not overlapping so the area that's overlapped is excluded in the area outside of that which is our border here because of the padding box setting. So one of them is stopping at the padding box the next one goes out into the border box, which is just really cool and he does have a another gradient for the inside here. And I think because of how we set this up he did say he had an extra span, which you know if we come and take a look we have the div, and then we have this floating span here. I'm not sure if you could replace that with a pseudo element I didn't dive into it and play around with it too much. And here just to show you like here we had the div before and then div span before if I leave these ones alone but I come to just this one and I change the color of the gradient. You can see it's only doing that outside gradient is actually switching colors. Of course we don't want to do that because they all show up and it breaks the entire thing but just to show you we have like several different gradients going on here as well. But anyway, really cool solution probably again this is linked down below if you want to explore this more I'm not deep diving exactly how it's working but it's this idea that you can only show part of where you want to mask by having two masks with the same setup but one of them padding box just blows my mind and gives me lots of ideas on stuff we could probably do with that which is really cool. And then there was the last one which was jays and jays is also, you know, look at that it works. It's fantastic. And his is actually very similar to mine. First of all, let's look at how he's doing it where he's just deconstructing check that out. First time I see that where he's deconstructing to get the X and the Y and we see it's coming up here on the HTML one singular X and Y as well so not a separate one for each box like hyperplex did. So hyperplex is alone on that one. And similar to us in other approaches are similar to mine in other approaches and what really made me validated here was when I saw the background attachment fixed. So we did it similarly on that which is awesome. Though he did also use a card after and a card before to be able to do it so not on the background of one of the elements. But the one thing I found really cool here was where I use if let's go back to mine for a second. I did set up like the background image which is just my gradient they would move around right so nothing too fancy there. And then I had to use a negative zed index to pull it backwards and then with my negative zed index going backwards I can inset it negative one to get that size difference there so I could actually see it. Where Jay departed and did something really cool was with this mask here and this took me a while to understand how it's working. But basically he set his mask up so the gradient is very similar but let's just change this to be red. So we see what's showing up here and you just get like this red border basically around and I was like trying to wrap my mind around it. Basically he has a linear gradient going in its four pixels thick is what you see here going down each side. So like if I come on this and I change this to one pixel we're going to see that that one pixel is controlling the top and if I change this one to 10 pixels. That one probably will be there it is on the bottom then these are the left and the right so I can do this one at 20 and I can do this one over at one. Just so we can see that what he's done is he has this div across the entire thing and he's masked instead of trying to hide it away by pushing it backwards or something. I think this is actually a really nice amazing solution where he's just hiding the part we don't want to see. And I tried doing this at one point as I mentioned with like a mask was it a mask I think I think I tried doing it. Yeah, I did it with a gradient but I was trying to make like gradient boxes and then it was just a nightmare and I couldn't get things to align because the gaps and then the one pixel space. It was a disaster and then I saw this and I'm like oh I guess I sort of had the right idea but I didn't I wouldn't even have thought of setting it up like this. And even with the way this is done like I wouldn't have created my mask this way I would have done it. Actually I'll show you I'll comment this out and I'll be back in one second I would have thought of doing it this way instead where I'm doing like white and then transparent starting at the very beginning. So I can do it for like down and across and then like transparent the whole way down and then having it be white at the very bottom and vice versa but this is kind of awkward because then I'm dealing with percentages instead of pixels. So to get it small like this would work and so like setting it up like this wouldn't have occurred to me though obviously it works and it's really cool. We could probably do a bigger breakdown on how this gradient is working and what exactly it's doing but I'm going to save that for another video something for you to dive into and have some fun with in the meantime. Or if you're just confused by what you see there leave a comment and let me know. Down below but I thought it was really really a you know using the mask this way so you don't have to worry about layering stuff was such a fantastic idea and I wish I thought of getting it to work that way. Instead of doing it the way I did it definitely some similar ideas between you know obviously we need to track most positions. Even though we saw between hyperplex and the rest of us there was different ways of doing that. Then we need to have the outline and I think me and hyperplex were the closest on that in that trying to get the outline just by layering different things and the one in the back is a little bit bigger. Whereas to Manny did that other approach with like the overlapping areas by doing a mask composite and excluding stuff which whoever knew that was possible. And then Jay instead of doing that used like the this mask you're really clever mask around the sides here to just instead of worrying about layering stuff was just masking and only showing the areas. Or the sides that we need and I've mucked his up completely so let's just hit refresh on that to take a look at how it would actually work. So yeah definitely in the comments let me know which one of these approaches was your favorite one if there's any of these that have confused you. The code pens are down below so you can check them all out play around with them. And I hoped you'd like seeing less so exactly how I did it since you could go check out hyperplex really good video for that one instead also linked in the description as they mentioned before. But more of like my how I eventually problem solve my way there and then just exploring these different ones and let me know if you like this type of video as well because I've never done anything like this one before. And with that I would really like to thank my neighbors of awesome Johnny Tim Simon Michael James and Andrew as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the Internet just a little bit more awesome.