 Inside this video, I'm going to show you how to create this hover effect, where it sort of makes it look like your cursor is glowing when hovering over a card, and we're going to do all this inside elements work. What's up everyone? I'm Jeffrey at Lightbox, and we are going to have a bit of fun on this one. This is one of those fun things that we could add to our websites with the right design to make certain sections stand out with this sort of hover glowing type of effect that we're going to do. This is one of those tricks that you could use to spice up your designs to add a little something extra to one of the websites that you're working on. We're going to be building all of it on Elementor, no additional plugins. There are going to be two co-snippets that we got to add, but don't worry about that. I'm going to walk you through each step along the way. And if you do have any questions, make sure to drop them in the comments. And if you do find this useful, like this kind of stuff, make sure to do that good YouTube stuff by liking and subscribing. It does help support the channel. Okay, let's go ahead and have some fun. I'll show you how to do this now. We're going to be using this page to build it out. Now, the first thing we got to do is drop in a container. And I'm going to add a bit of spacing around this container just so we got some breathing room. I'm not going to focus too much on the styling. So I'm just going to do two RAM all the way across. And now we need to drop in our inner containers. And these are going to be the cards. So let's drop in this inner container here. And I'm going to duplicate it twice. All right, so we got three cards here. Let me create some spacing here by going to the outer container and layout. And I'm going to use my gaps. And I'm going to switch it to RAM and just put a couple of RAM around it just to give it some breathing room. Now this is going to be really important for this tutorial. We are going to have to use our navigator. Now you could either push the navigator over here, or you could detach it, I'll detach it for right now. But you'll see why we're going to need this because we're going to be using some inner containers. They're going to be on top of each other. It's also going to be really important for us to label everything inside of here. So I'm going to call this my cards section. And then my containers here, which are actually going to be cards, I'm just going to call them cards. Let me go ahead and copy that, paste it over. All right, now what we need to do is inside our card, we're just going to style it up once and then we're going to duplicate it. So let's go over here to this card, we're going to set this up. The first thing we need to do is go over here to our CSS classes and put in card. Next thing we're going to do over here is go up to our padding. And we're going to put in two pixels right here. Now the padding is not actually going to be padding. Because once we have everything set, this is actually going to be the border size. So if you want a thicker border, you could put four or five. If you want a slim border, you could put one. That'll all make sense later once this all comes together. I find the sweet spot is either going to be one, two or three pixels. Next, go over here to Z index and put zero. To do that, let's go back up over here to layout. Go all the way down here to additional options and set your overflow to hidden. Now we got to add some styles to this. I'm going to go over to my style and this part right here is totally up to you. You know, how much of a border radius do you want? I'm going to put kind of a big one. I'm going to put 12 pixels here just so that way it's easy to see. You know, we want to create that card. Next, let's add a background. So we're going to go over here to background. Use your color. What we're going to do is we're going to choose the dark background and I am going to put this to RGB just so we could see the transparency, which is right here. And we're going to take that all the way down to point two. That is it for the card. Now what we need to do is we got to drop some inner containers inside your card. The inner containers are going to be what makes the element works. It's going to be your glowing element and so on. So right inside here, let's go and drop in an inner container here. And you know, we're going to use this navigator a lot. In fact, let me move it over here so it's easy to see. And we're going to duplicate this two times. Now these are a lot of inner containers and as a rule of best practice, I do try to minimize as many inner containers that I use in a layout because they do add extra divs. But this is the only way to achieve this effect. So just be mindful using this. We are going to have a few inner containers in here that do add a lot of divs. So I would only use this inside sections that I really want to stand out. I wouldn't just use this to use it or use it all over the place just to let you know to be a little bit responsible when using this to keep the bloat minimized. All right, with that, let's go ahead and continue. First thing we need to label each one of these. So that way they're easy to identify and that way we don't make mistakes. I'm going to call this one inner. I'm going to call this one blob and then we're going to call this one fake blob in the inner. The first thing we're going to do is go to advance to classes and we're going to give it the inner class. We're just going to put an inner right here. Now inside the inner, this is where we're going to put our elements. So if you want to add, let's say I'm just going to make this like an icon or something or you know, just, I don't know, let me go ahead and just drop a few things in here. Drop an image. I'll go ahead and choose. Let me choose this icon right over here. Let me sell it up. I'll just make the 60 pixels and I will push this to the left. All right, I'm going to add a title. Let me add that right here. Make sure everything you're adding stays in the inner. And then I'm going to add, let me see this text editor right here. And now let me switch this up over here, style everything up. I'm going to make this white and then I do have some type settings set up here. Same thing. I'm going to style this and make it white. And you're going to style yours up and make it, you know, the way it is for yourself. Now right here inside the inner, this is where we could set up for basically like our card, our flex controls. The card right here that we set up, that's in the back. This is just the background part of the effect. The inner is actually what we're going to be styling up to say we want to add some padding. Let me go ahead and put this to REM. And I'm going to put a lot of padding just so that way it is easy to see. And then I'm going to go over here to layout and use my flex controls. I'm going to add a gap right here. So we got some space. I'll just put one REM. So we got some space right here. So we could go and to our style. And this is really, really important in your border radius. Make sure it is the same as your outer card. So my card here is 12 pixels. I'm going to make this 12 pixels as well. Make sure it's the same because if not, it could affect your border. That'll make a lot more sense coming up. Now all those you style up the way that you want the next part though is really important. And that is how we do our background. This is going to affect the effect that we are making. So I'm going to give it a background. I'm going to use this off black right here. And I'm going to switch it to RGBA just so I can see the opacity. I'm going to take it to 0.8. Later we're going to come back to this and we're going to adjust it and it's going to adjust the way our hover effect looks. And then on hover, very important, make sure to do this on hover. We're going to do the same thing. Choose the color. I'm going to choose the same exact color. But this time I am going to take this down to 0.6. And the same thing. I am going to come back later and adjust this to, you know, fit the effect that we want to have in the end as far as how bright do we want the actual hover to be. All right. That is it for the inner and we are almost there. Just a few more things to do. Let's go over to our blob. Now in the blob container, the first thing we're going to do is go to advanced and the CSS classes, put in blob. We're going to use this class right here. And then also let's go over here to fake blob. We're going to do the same. Go over to CSS class and you guessed it. We're going to use fake blob for the class. So fake blob right here. All right. Let's go back over here to blob and just do a couple of things. First thing we want to do is add our background color. Now this is going to be the color of the hover effect. So say I wanted to hover purple or green or blue, whatever I want that color to be, the blob is going to make it that color for right now. You know what? I am going to choose purple. Let's go with purple to start it off. Next up and all of these steps are doing right now. These all need to be followed exact in order to make it work this way. So follow along. We got to go to border. Change this to percentage and what's make it 50% all the way around. Next we're going to go over here to advance to position and to absolute. And then right here where we have the horizontal orientation of vertical orientation. Go to the zero and just delete it. We want to make sure there is nothing inside these fields right here or else it will break the effect. Now let's go over here to fake blob. We're just going to do a couple of things here. Let's go to style. Go to border and then the same thing we're going to turn this to percentage and we're going to make it 50% around. We're going to go over here to advance over to position and absolute. You don't have to worry about the horizontal or vertical right here. It doesn't have any effect on it. We are good now. Now all we got to do is add a couple of code snippets. There is a link inside the description that will take you to the step by step blog post on the Lightbox Academy site. Just scroll on down until you find the code snippets. We first have this one here and this is for our CSS. Let's go ahead and copy it and then go here to the cards. So make sure it's underneath the card section that's wrapping all the inner stuff. Go over to advance to custom CSS and paste it in here. Next up we have another code snippet. It is going to be some JavaScript. All you got to do is copy this and paste it and we could do this in a couple of different places. You could put this over inside your custom code inside Elementor. Let me show you that really quick. You could add new. We're going to call this a glow hover effects and then put it at the body and really important we want to make sure it's at the end. That way it does not slow down the site. If you put it at the top it has to load first as a page loads and we don't want that. And then we could go over here to conditions and edit and make sure that it loads only on the page that we are using this by going to singular pages and then you could type it in and find your page that you are building this with. But I got another way to add the code to that way we could see it work live. All we got to do is add a section right here. Let's go ahead and add one. We're going to go up here to our widgets type in HTML drop in the HTML widget. And then right here in our HTML code we could copy and paste that in there. And now let's go ahead and preview it in the front. Let's take a look and there it is. We have it working right here. Now let me show you how to adjust this so that way you can make the style fit for your own website. All right. I am going to go back over here to my card section and let me actually name this right here. I'm going to call this code section. It's really important when we start doing stuff like this and building layouts to label everything so it's easy for you to understand and manage. All right. I'm going to delete these other cards. And then I'm just going to duplicate this card right here. Let's adjust this first one. Let me show you what you could do with it in order to play with it and you know make the changes yourself. First off blob this one. This is where you're going to change that color. You can see right here I can make this you know green I could change it and I can make it pink. I could do all kinds of stuff to make it really stand out. I'm going to leave it on blue for right now and let's take a look in the front end as well because it's really helpful to see it in the front end. We get a better idea of how it's going to look and feel for us. All right. Going back over here to card. Remember we put that padding on it. So this is going to work for our border. Let's say we want a thicker border on it which I would not recommend going too thick. It doesn't really look too well but you can see we have now a thicker border. I think one two or three pixels looks best so I'm going to take this back down to two. Another thing you might want to adjust is how much of this do you want it to show. Do you want it to be very subtle very faint or do you want it to be vibrant and bright and stand out. You're going to control that over here in the inner. You're going to go over to your style and over here in the hover. Remember we set the hover up. Let me click on this at point six. That is 60% opacity. So we're at point six. Let's say we want it to be more bright. You could take it all the way down to like you know 2% like 20% you see how it's more bright here or if you want it more subtle you could just take it up here and make it more subtle. Let's say we're going to make like just like a white blob like check out this site right here. All right. This is one of my inspirations right here. So this is like a really good site. And you could see it's very faint on how the hover effect works on it and they made a really light and faint. You could do something very similar by going over here to your blob making the blob a white color so we can make it right here like white. Okay. We can see it doing that but let's go over to our inner and to our hover and let's oops let's go over here to RGBA and let's take it up a bit you know let's go ahead and make it more solid. I'm going to take it to 0.9 and now it's very faint. We can still see a little bit but you know it's not like over the top and that is it. Have fun with it. Play around with the backgrounds like right here. I'm going to go to each one of these. I'm going to go to my blobs. I'm going to change the colors. I'm going to make this one green in the middle and then let me go over here to the right one and I'm going to make this one pink all right that way we could have a bunch of different colors going on. Now you might not see it happening here in the back end you got to refresh it in order to see it but if we update it take a look in the front end. You can see if we got our green right here we got that very subtle I really like this style right here I like this light color that looks really clean right there I just love how it does that border effect right there and then we got our pink you know this is great for like a pricing card or a good call to action or you know maybe something like a highlight you really want to stand out on the website and look at if you're going to use say a light website with a light background then just reverse the colors around play with those background colors the background hover and have fun with it and just a heads up I'm going to be doing the same thing for bricks coming up inside my next video following this one well that's it for this video I hope it helped out and I hope you could find a good use case for it to make one of your designs and one of your websites you know have that little bit of extra flair and if it did help out you know that good YouTube stuff don't forget it like subscribe support the channel it is much appreciated thank you for watching and I'll be back again soon with more fun stuff like this all right thank you