 Inside this video, we're going to be creating this hover effect where the cursor sort of glows when you hover over a card and we're going to be doing all of this inside bricks. What's up everyone? I'm Jeffrey at Lightbox and I just did this tutorial inside Elementor, but I figured since I'm using bricks now on a daily basis and I've completely fallen in love with bricks at, it's time to start doing some bricks tuts. So here is the first of what's going to be many more to come. Alright, let's go do this. Here's the effect that we're going to be creating. Now when we hover over our card, not only do we get this background blur, this glow, but also the borders will light up as well, which I really dig especially this one right here because it gives it like that silver lining type of look and feel. Now I did do it this week for Elementor, so if you do want to build this in Elementor, I'll leave a link inside the description, but for now we're going to be focusing on doing this with bricks. Alright, to get started, add a section. Now I want to add some spacing in the section. You could do that by adding some padding right here, but I have a class already made to add padding to my section. Alright, next up, let's go over here to the container and let's drop in a block. Let's go to the block, click on it and let's give it a name of card. This is going to be our card right here. I want to turn this into a grid so we can see this and visualize it as a card. So I'm going to go back to my container. I'm going to change this to a three grid layout. You could do that by going to display and grid, putting in your templates, one FR, one FR, one FR, and then you could go ahead and give it a gap, give it like two rim or something like that. But I do have classes for all of these. I'm going to call this one grid and I'm going to go to grid column three and then I'm going to go to gap. So if you are using a framework, this is really helpful to have classes so they just make things go a whole lot faster. Now that we got our cards ready, let's go over here to our card block and we're going to drop three blocks inside of here. And let's go and open this up and let's label each one of them. The first one is going to be inner, the next one is going to be blob, and then the next one is going to be called fake blob. So the inner block, this is where we're going to add our content. And then this blob right here, this is what we're going to use for coloring our hover effect. The card is going to be the card and it's going to serve as the background. Make sure your structure looks like this. Now let's set this all up and we're going to start from the top and work our way down. So in the card, first thing you want to do is give it a class. I'm going to add my class down here, but feel free to add your class the way that you want to. We're going to give it a class of just card, that's it. The next step is going over to our layout and we're going to give it padding. Now the padding that we're giving, I'm going to do two pixels. This isn't actually padding, this is going to be the border. So if you want your border thickness to be three pixels then make it three pixels. If you want to really light border, just give it one pixels. Now usually for padding, I do use REM, but since this is acting as a border in this situation, I'm going to use a pixel. Next up, let's go over to Z index. Now by default it's at zero, but just to be safe, you could add zero or if you got a class, I have a class for all my Z indexes, let me go up here. I will just put my Z index zero class in it. Then we got to go over to our overflow and we want to give it an overflow hidden. Now I'm using advanced themers, so I have a lot of extras in my builder. So if you're seeing things you don't have like a drop down, if you're just using bricks you're going to have to manually type it in, but if you're seeing other things like this left sidebar, this right one and like a little extras on there is just advanced themer. I love this add on, it does make my workflow go a whole lot faster. All right, we can set the overflow to hidden or also if you do have a class like I got a class for my overflows, it just makes things go a whole lot smoother. Go ahead and use that. The next thing is we got to set our position to relative, you could do that right here or also if you do have a class for it, go ahead and put your class, I have a class right here. Now we got to add a couple of styles. One thing we got to do is give it a border radius and this is totally up to you. Whatever border radius that you want to give your card, you can add it here. Now I could go ahead and put in, you know, like 12 pixels or you could put in RAM, whatever you prefer. I have a class already for all my border radiuses, so I am going to use that. And we have one last thing that we need to do here and that is to give it a background. Whatever color you give your background here, this is going to be the color of your border. So I am going to give it this off dark color right here just so we can see the border. I don't want to give it this color because if I did, well we wouldn't see a border around the card. So I am going to use that one right here. Now let's move over to inner. The first thing we want to do is to give it a class and we are going to give it the class called inner. Next thing you are going to want to do is give it a border radius and you want your border radius to match whatever you put in your card. I have my border radius, it was the border M, my medium border radius right over here. So just make sure your border radius matches on both. That is going to make things look clean when we have the hover effect going. After that we got to set our background color. So first let's give it a background color and I am going to give it this dark color here and I am going to give it a 0.8 opacity and then we got to go to hover and give it the hover background color. Choose the same color that you selected for your regular one but go ahead and give it a lighter opacity. We can start off at 0.6. Now these background colors right here you are going to play with them and adjust them later once everything is set up. The next step now is you would style up your card. The inner is actually going to be your card. This is where you are going to put all of your elements. Like I could go ahead and put in my image, I could put in my heading, I could put in my text, I could style all of this up and I am going to style up my inner as well by giving it the padding. You know if you are going to give it some padding, give it like two rim right here, oops not e-rim, you could give it two rim and you can style up and put in your gaps right here. Or if you are using your own classes or framework and you have a card class you can go ahead and use that. I am going to use my large card right here just so we got a lot of spacings and can't see a lot of things. I will just select an image. Now I am not really going to style up anything. I will go ahead and let me just give this 100 pixels so it is not super big and we will just leave it at that for now. But this is where you are going to style up your card. If you are making the price card you are going to put all of your elements in it. You are going to style it up all right here inside your inner. That is it for the inner. The next step is we are going to go over to our next block, we are going to go to the blob and the first thing we are going to do is give it the class called blob. Next let's go over here to our border. Let's give it a border radius and I am going to link this together right here. We are going to give it a border radius of 50% all the way around. After that we want to set the position to absolute. You can do that here or if you have a class you could set your class. I have a class so I am going to use that and then after that we are going to give it a background color. Whatever background color you give right here, this is going to be the color of your hover effect. Then over here inside the fake blob, in fact I labeled that wrong, all right it is not blog it is fake blob, all right we are going to go over here to our classes and we are going to give it the class fake blob. Below a spacing everything lower case and then you could always change out these classes inside the CSS snippet that I am about to share. All right we are going to do the same thing here in the fake blob. We are going to give it a position of absolute and then we are going to set up our border radius. Let me clear that I am going to set up our border radius at 50% and now everything is set up. There is only two things we need to do. We got to add this right here, this CSS snippet and then a JavaScript snippet. So let's start off with the CSS. Let me copy this right here and I am going to go over here to the card, all right it goes inside the card, go down to the CSS and add it in here. You see it is already going to make everything disappear. The next step is we need to add some JavaScript. So take the JavaScript and add it the way that you know your own preferred method. For this tutorial just to keep everything simple I am going to add, let me add a new section. I don't need this container right here, in fact I could probably convert that into a block and then I am going to drop in a code widget. So let me go ahead and put in code, drop it in there. Let's go over to our code widget. I am going to paste this in here, execute code, render without wrapper, it's all good. But yeah, do it the way that you like. Most likely we'll throw this in my WP code box. Let's go ahead and take a look now on the front end and here we go. It's working. Now I do notice something here with the borders. Let me go back and take a look and see what's happening there. All right, so we got our border radius here on the card. I got my class here. And then I need to have that same border, okay, let me add that my border radius. I guess I didn't add or I might have accidentally removed it. Let's update this again. I'll save it. Let's go back to the front. Okay, there we go. Now it's working and looking clean and check this out. We could just go here now to our card and let's duplicate it a couple times. And then you can go here to your blob. Go to the style, to your background and then from here you can go ahead and change it. So I'm going to turn this one white. Now you're not going to see it here in the builder. You got to take a look in the front end and here we go. It's looking pretty good right here. Now this you see it's pretty bright to me. This is quite bright. So what I could do over here is let me go back to the middle. I'm going to go back into my inner and then on my hover and this is where we could control the opacity and how we could control our background colors to get the right effect, the right amount of hover. I'm going to take this all the way up to a .9 because without white hover, well it stands out a lot more now. You can see it's a bit more of that silver color and that is it. If you have any questions, please drop them inside the comments. I'd be happy to help. Well, I hope this video helped out. I hope you have fun with it and could create something super dope. This is the first of many bricks tutorials that are going to be coming out that I'm looking forward to creating, but I do want to hear from you. What do you want to learn in bricks? What challenges have you been facing? What do you feel is going to help you most with your bricks websites or even just getting started with bricks? Drop that inside the comments and if this video did help you and added some value, make sure to do that good YouTube stuff, you know, like and subscribe. It does help to support the channel. Thank you for watching and I'll be back again soon with more of these tuts.