This image we can magnify the image so we're going to create this effect using a library called magnify.js so let's get started .
right here i have created this folder called magnify and i have a folder called images over here and in that we have these two images this is a.
Thumbnail image so it doesn't have much quality and this is the full image so it has higher resolution so we're going to use these two images in our project right now let's also create an html file.
And also a css file so let's click on new file and we'll just name it index.html and we'll also create a css file i'll just name it style.css all right let's.
Go to our index.html file and in vs code you have the shortcut where you can just press exclamation and press tab and you'll have this basic html5 code right let's link our css file over here.
Search for magnify.js on google and you'll find this website i'll also leave the link of this website in the description and this is the home page of the.
Magnify.js library and if you scroll down we can see that there are some demos and all these things you can go ahead and check them out and if you scroll down we can see that there are.
Some things we need to include in our file the first thing is the magnify.css file and then we need to include jquery because magnify.js uses jquery and then lastly we need to.
Include the magnify.js file and then we can see there's also an optional mobile plugin that we can use so it is called magnify hyphen mobile.js so let's get the cdn link of all of this.
So let's go to cdnjs.com you can find a link over here or you can just search for cdnjs on google and here we can see we are on the page of magnify you can just search for magnify.js over here and.
Get to this page all right the first Wesdigital
Thing we will do is get the css file so i'll just copy this link of magnify.min.css from here so let's click on copy link tag.And let's go back to our html file and i'll just paste it over here inside the head section all right now the next thing we will do is get the link of.
Magnify.js so let's go back and here we have jquery.magnify.min.js so let's copy this link.
And let's go back and paste it over here just before the body ends and we also need to copy the link of jquery so let's go back and let's search for jquery over here.
And let's click on jquery and let's copy this link so i'll just click on this copy script tag and let's paste it over here just before the link of magnify.js.
Right now let's start with the markup of our design so we'll just create a division with a class of card and in that we will have a heading.
So just type chessboard with pieces and the next thing you have to do is create an anchor tag and here in the edit if you have to.
Provide the link of the full image so here i just type images forward slash full image.jpg and then in the anchor tag you need to have the img tag so let's type img.
And in the src you have to provide the link of the thumbnail so let's tap images forward slash thumbnail right now let's open this in our browser and let's see how it looks so i have.
This extension called live server
Installed in vs code so once you install that you can just right click over here in the html and click on open with live server.And here we can see this is how our design looks right now let's add some css so let's go to our style.css file and first of all let's target the card.
We will set a width of 400 pixels and we'll also add a padding of let's say 24 pixels and we'll also add a box shadow of 0 pixels 4 pixels 40 pixels negative 8.
Pixels rgba 0 0 0 and 0.2 and i will also add a margin of 24 pixels top and bottom and auto for left and right so that it is in the center right now let's add some styles to the.
Image so here i'll just type card img and we'll set the width of the image to 100 of the parent and i will also style this heading so let's type card.
H2 and let's set a font family of roboto and let's set the color of the text to dark gray.
And we'll text transform it to uppercase and we'll also set the font weight to 900 all right that's it with the css and the last thing we need to do to add the.
Magnify effect is to add a class so let's go back to our html and here for the image we need to add a class and we need to set the class to zoom and we need to do one more thing so.
Let's go back to our magnify.js website and if we scroll down we can see that we need to call the magnify function so let's copy the script tag from here and let's paste it.
Over here just before the body ends now here we can see we are accessing the zoom class which we have added over here now if you add a different class name.
Over here you have to change that over here as well right now let's go back and let's go to our website and now let's hover over this image and now we can see that we can magnify the.
Image and everything is working all right so that's basically how you add magnify effect to the images in your website now if you go back to the magnify.js website.
And if you scroll down we can see that there are some options that we can add to the magnify function so for example we can add the speed and if you scroll down we can see that all the options are.
Displayed over here so you can go ahead and test out all these options over here i just test this option called speed so let's go back to our.
Index.html file and here the magnify function we need to pass an object so let's create an object and let's type speed and.
For testing let's set it to 500 and let's go back to our web page and now if you hover over this we can see that we have.
500 milliseconds for showing and removing the magnifying glass let's increase it and let's see how it looks.
Let's type 1500 and now we can see it is even slower so that's how you can add different options to the magnifying all effect.
Let's set it back to let's try 200 and that looks alright so that's basically how you add a magnify effect to the images in your website alright so that's.
It for this video i will leave the link of the source code in the description and if you have any doubts you can ask in the comments below and if you like this video please click on the like.
Button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day you.