Create a Border Spotlight Effect with Webflow Interactions

hey friends I'm sakay and today I'm going to show you how to build this cool hover glow interaction where the borders are kind of glowing following the mouse all using webflow with no custom code there's a little bit of trickery going on and some fun stuff and this doesn't require any custom code but I have added a little bit of custom code to make some things easier but it's very minimal and mostly it's all done with interactions and divs and again web design trickery so yeah I'm really excited to show you how this works and without further Ado let's jump into it [Music] so to get us started here what I have is a really basic layout nothing special it's just some text in a div a heading and a paragraph and then we have a card here with an icon and some text pretty straightforward nothing too much to it I'm not going to show you how to set this up it's very simple but once we have this card set up and we have it in this grid here what we're going to want to do is duplicate this a bunch of times and eventually have a grid that looks like this but each of these cards needs to have a border and as we hover over this grid that border should have a glow in it that follows our Mouse right and the way that we're going to do that is first we're going to create a new div and we're gonna call this div you know border glow card wrap give it a new name so you don't get confused with my pre-existing classes and all I want to do with this is copy the background color of this first div and make sure the background colors are the same and I'm gonna give it two pixels of padding and now I'm gonna put this card in here I can do it here from the layers panel and the last thing I'm going to do to this bordered glow card wrap is give it some border radius let's do three pixels so if you don't know in general A good rule of thumb is that your border radius is equal to the outer border radius minus the padding so my outer border radius here is three pixels which means that three minus two pixels of padding gives me one pixel of Border radius and that just ensures that your border radiuses are kind of matching and they're following each other really nicely and there's no weird discrepancies between them so now that we have our card wrapped in here you can maybe start to see what's going on if I change the background color of this outer card you're going to notice what might be happening here so I'll just make this like white and you can see that we have kind of achieved a stroke right this is kind of a border and we've just done that by making the outer div Pure White and by giving it that padding it looks like it's a border and that's what we're going to use to actually fake this effect so let's change this back to our regular color perfect so what we want to do next is add another div and I'm going to call this border glow circle and this is going to be our little circle that's going to provide that effect of the glow and to make this work really nicely what I want to do is first off I'm going to put the Border in here inside the card wrap and then I'm going to give this a background color of you know white I'm going to give it a radius of 50 to make it perfect circle and next I will add a filter this is going to be our blur filter I'm just going to set it to maybe like 80. yeah that actually looks pretty nice it looks a little bit odd right now because the Overflow is is being cut out but it doesn't matter it's not going to matter once you actually fix this so the next thing I'm going to need to do is to make this circle position absolute and set it to the top left and you can see now that by setting it to the top left it's centered to the top left of my body that's because it doesn't have a relative parent so we're going to go back to our border glow card wrap and set that to relative and now if we look at where our border glow circle is it's in the top left corner here but you can see it's kind of tiny it's just one pixel by one pixel basically we'll see why in a second it'll make more sense but essentially what we want to do is to make it a hundred percent of the width of this card plus half of the padding which in this case because of the way it's set up is actually just half of the width and half of the height but what we're actually going to do is we're going to use some custom code this is not required you could just make this you know um 304 by 200 pixels which is exactly half and half and this will work okay but the custom code is just going to make this a little bit more scalable and it's really really simple it's just CSS and it's just going to make sure that whatever your grid size is whatever this card is it's going to be the exact perfect width so to do that I'm going to add a new embed in here and I'm going to open a new style tag and close it and then we're going to take our border glow Circle [Music] and we'll make the width a CSS calc and it's going to be a hundred percent Plus 12 pixels and the height is also a calc of 100 plus 12 pixels the reason I'm using 12 pixels is because this grid has a gap of 24 pixels on both sides so if this was different you know if this was 16 pixels you'd want to make it eight and it would just have to be half and essentially what we're doing with that is we're making sure that the div that we just created overlaps ever so slightly with this so it goes in the middle here and in the middle here last thing we want to do is make our glow card wrap have an overflow of hidden so that that overflowing glowing border is hidden now I'm going to take this copy it and paste it four times to fill up our grid and you can kind of see what's happening here hopefully you can see that we have this like glowy it almost looks metallic background because of that Circle that we have in there so now there's another step that's a little bit tedious but we're going to use more custom code to help us out you can definitely do this manually but again to make it scalable and more responsive we'll use the custom code so what we want to do is essentially take all of our circles and align them to the top left here we want every one of these circles within all of these cards to be aligned to the top left of the grid again normally you could use position absolute and relative to make that really easy but it doesn't work here because of these specific conditions so first we're going to apply some combo classes to each of these circles so we have two here I'm going to add three here and four here to this last one and then in our custom code we'll just take this class duplicate it we can remove what's in here and then we'll just add the combo class modifier here so period underscore two webflow adds an underscore to these at least the number combo classes when it actually publishes the site so you'll need that even if your class name is just two so two for example is this one here and we just need to move it left by minus 100 and then minus 24 pixels which is our Gap so we just kind of follow the same thing left calc minus 100 minus 24 pixels and then we just repeat for the next two so number three this is going to be top and then the fourth one is going to be both top and left because it's starting out in the bottom right this will be moved up and left so now if we save and close we should see that all of those glows have been moved to the top left corner here so if we hover over them you see that it's over here they're all kind of sitting on top of each other which is great it's exactly what we wanted and it's starting to sell this effect that there's a single Unique Glow shared between all the borders of these cards so now we're going to add our interaction so with our grid selected we're going to go up to the interactions Tab and we'll create a new mouse move over element interaction so we'll play a mouse animation and I already have one here but I'll just build a new one to show you how this works so cover glow interaction and what we're going to do is we'll select our Circle and at zero on the x-axis we're going to move this by minus 50 percent on the x-axis and at 100 we're going to move it to 150 right so it's going from edge to edge following the center of our Mouse so when my mouse is here it's going to be centered over it and now one thing that we want to just do to make sure is we actually want to make sure that this is affecting all of the Border glows so we select the class of Border glow circle so now if we preview this we'll see that all of them are moving left and right following our Mouse as we move left and right on the x-axis from here we just kind of replicate the same thing so with that class selected we move on the y-axis at the start it's going to be minus 50 and at the end it's going to be 150 percent and now again if we preview it we've got an error because this is the wrong class so make sure again there should be border glow circle the bass version so now if you turn live preview on you can see what's going on and it's following my mouse all the way to the top left corner all the way to the top right corner bottom right bottom left and we have this glowing effect so let's preview it and as mentioned it's following my mouse and it's selling this this really nice glowing effect so the effect is done in theory you could ship it like this but obviously it looks a little bit odd because when I leave it goes back to the center which is fine I guess but it also stays on it's got this really bright glow in the middle and it doesn't look quite right so what we can do is if we close out of here we can add another interaction to the Grid or on Mouse hover we start an animation and I'll just create a new one called border Circle to fade in and essentially we're just going to take the Border Circle and make it so that at the start as our initial State the opacity for the entire class order glow circle is zero and we'll just make it affect all elements with this class make sure again that it's the Base Class not the combo class and now we're looking good so then we'll just make the opacity go up to a hundred at our end State here we'll do maybe ease in out and we'll just make this really short just so it takes you know a really quick second to start glowing and you really get that effect almost immediately then we can duplicate this and apply it as our hover out animation click into it I'll rename it to fade out Delete the final keyframe and uncheck initial state from our first keyframe then we're just going to do a similar animation here we'll do 0.15 and let's see how that looks [Music] okay so it's looking pretty nice especially fading in you can see that it fades in really nicely but you can also notice as I move my mouse out it sort of has like a flash where it's going back to the center and then it's fading out so let's go in here and just tweak this animation a little bit or just make this even faster so it should be maybe like 0.5 or sorry 0.05 we'll see how that works okay and then I'm just gonna go back and tweak this animation to have maybe like 85 smoothing [Music] okay and that should mitigate that effect a little bit so now that it has more smoothing let's do 90 even we can go back and tweak the fade in this can be a little bit slower can maybe be like 3.3 or 300 milliseconds and the Fade Out can be maybe back to 0.15 it's a little bit of trial and error here let's see how this looks I think that looks pretty nice it's like slow enough that it's not super jarring but also fast enough that you don't get you know weird things as it moves back to the center now all you have to do is fill this in with your content as I have done here and hit publish and preview it live Beauty you got yourself a really nice glow effect you may have seen this on some other websites uh KRON does this in their product I saw another product recently that I can't remember the name of that had this on their website that inspired this tutorial find the product and put it in the description but yeah that's it for the effect I hope you enjoyed it I hope you learned something I think this is my first actual webflow video on this channel so hopefully you enjoyed that let me know if you did leaving a like is always a great way to let me know but also leaving a comment and of course subscribing and as always I will have a link to this read-only file in my patreon so if you want to subscribe to that it's five dollars a month you get all of my working files all of my tutorials and the link is down in the description and with that said thank you for watching until next time happy designing foreign [Music]

Channel: Sekei Design

Views: 5,640

Keywords: web design, web development, css hover effects, web design process, webflow, webflow interactions, custom code, webflow tutorial, webflow animation, webflow animation tutorial, webflow animation hover

Id: dN5Nmgpon0k

Length: 13min 5sec (785 seconds)

Published: Fri Dec 09 2022