This we can see we have this glowing effect and in one of my previous videos i had already shown you how to design this from scratch using html and css so in this video we're going to see how to.
Add this glowing effect to the elements in our blogger website so let's get started all right here's the source code of our.
Design and this is the html and this is the css now i will leave the link of the source code in the description as well now you can go ahead and make changes.
Over here so here we can see in the h3 we have welcome written over here so here we can see welcome is displayed over here you can go ahead and add more elements over here so let's add some.
Image so let's type img and let's get the link of an image so here i'm in pixabay.com and let's search for technology and let's just get the link of this.
Displayed over here now we need to decrease the size of this image using css so let's go back to style or css and let's type glowing card.
Img and i'll just set the width to 100 percent now these elements are one next to the other so we have to add everything inside a single division so i'll just.
Create a division with a class of content and i'll just cut the ending tag and paste it over here.
And let's also add some text over here so i'll just create a paragraph and i'll just add some random text and here we can see we have this card where we have the heading the image and.
This paragraph let's add some quick css so let's go back to our style.css file and here in the glowing card i'll just add some padding so i'll just have padding.
And i will just set it to 24 pixels Wesdigital
And we'll also add a line height to this paragraph so here i'll just type glowing card p and line height.2 so now this is our card with the glowing background now you can go ahead and add your own data over here you can add a button if you want and it's all up to.
You you can change this card to whatever you want and then you can just go to the style.css file and you can change these values.
So here i have set the height and the width of this glowing effect to 90 percent of the original element so you can go ahead and change these values and see how it.
Looks for now this looks alright so now let's copy this code to our blogger website now here i'm in the dashboard of my blogger website so let's click on new.
Post and let's create a new post over here and here i'll just add some titles i'll just type our best product all right now the next.
Thing you have to do is click on this button and click on html view by default it will be in the compose view so you have to choose the html view and now here we can add the css and the.
Html so let's create a style tag over here and here in the style tag we will add the css so let's go back to our source code.
And let's go to style.css file and i'll just copy all these css and let's go back and paste it over here right now let's go outside the style tag and here we will add the html so let's.
Go back to our source code and let's go
To the html file and i'll just copy all this html inside the body and let's paste it over here.All right our html and css have been copied so let's click on publish and confirm and now let's see whether the design works all right so let's click on view.
And here we can see that the card is being displayed let's hover over this and we can see that the glowing effect is not being displayed so in our original design when we hover.
Over this we have the glowing effect but it's not being displayed over here so let's see what's the problem let's right click over here and click on inspect.
Now in our design we had added the glowing effect to the after selector so here we can see we have the after selector and in that we have this.
Glowing effect so if you go back to our source code and if you go to the style.css file here we can see for the glowing card division which is.
This division right here we are adding an after selector and in the after selector we have this linear gradient background color and this blur effect and all of that so that.
We have this glowing effect over here now for the after selector we had added a z index of negative one so here we can see we have a z index of negative one.
And this works in our design because we don't have any other z index values so what we will do is we will remove this after selector from here and we will add a division instead of that so let's go.
To our index.html file and we'll create a new division and we'll create a division as a container division so let's type glowing card container.
And i'll just cut this ending tag from here and paste it down here right now we have this main container division called glowing card container and in that we have this glowing card.
Division now after this division we'll create another division and we'll give it a class of glowing bg now we will use this division in place of the after selector.
So let's go to style.css file and we need to make some changes over here now here we need to add some of these css properties into our glowing card container division so let's add the.
Selector over here so i'll just start gluing card container and i'll just copy some of these css properties from here so we need to copy the width and the height and we also.
Need to copy the margin to bring it to the center and we'll also copy the color and the font family and we also need to copy this position.
Relative so we'll just cut all these lines of css from here and let's add it over here inside the glowing card container.
And let's go back to our design and let's see whether we have any problems and we don't seem to have any problem i think the height and the width are a little less.
So for that we have to add a width and a height of hundred percent of the parent over here and now we can see that the height and.
The width are correct now we need to remove this glowing effect from this after selector so let's go back and here we can see we have glowing card colon colon after now for the glowing.
Effect we have created a division of the class of glowing bg so what i will do is i'll just remove the selector from here and i'll just type glowing bg.
Here we need to type glowing card container and then instead of after we need to type glowing bg right now let's see whether it works so.
Let's go back and let's hover over this element and we can see that the glowing effect is being displayed over here now the position of the glowing effect is not correct it is more towards the top.
Left corner so for that we have to add a line of code to our glowing card container or all the elements inside the glowing card.
Container so here you have to type glowing card container and then type asterisk to select all the elements inside this division and here you have to type box sizing and.
Set it to border box now this line of code will make sure that you have the correct height and width for the elements so now let's go back and here we can see when we hover.
Over this we have the correct glowing effect now we can just increase the height and the width over here so i'll just increase this to 400 and 500 or let's decrease.
The width a little bit so i'll just set it to 360 pixels and let's also decrease the height to let's say 450 pixels right now everything looks alright for this.
Glowing effect so now let's copy this code to our blogger website so let's go back to our post and let's open this post and let's replace all this code so let's.
Go back to our source code and i'll just copy everything from the style.css file and i'll just paste it over here inside the style tag.