In this tutorial I will show you how to make a magnifying glass effect in HTML5 and CSS3. When you hover over the image with your cursor, it will make a zoom effect.
To begin, download these four files to your root directory. Your root directory is the same folder you save your index.html file. Do not rename any of these files. Again, DO NOT RENAME any of the files.
Download: http://adf.ly/1eSfuF OR http://sh.st/1OIJ1
Once you have all the files, go ahead and open the website you are working on with the HTML editor you use. Personally I use Dreamweaver.
For this tutorial I will be using a blank web page.
Before we go any farther, make sure your document is HTML5. Your DOC TYPE should be similar to my.
Lets begin by specifying the character encoding and scripts that this document will be using. Please copy the following code into your HTML file. You can find it in the description, so simply just copy and paste it. Make sure the script I am highlighting right now is placed right before the closing body tag.
Before we go any farther, make sure you have two of the same images in your root folder that you will be using. You need a small version of the image and a large version. In this tutorial I will be using a three hundred and fifty by three hundred and fifty photo and a five hundred by five hundred photo.
Now go to the part of your code where you are going to add your image. Copy and paste this code.
＜img src='SMALL' name="zoom_01" id="zoom_01" data-zoom-image="LARGE"/＞
Then replace the word small with the file name of the smaller image, and do the same with the larger image.
If you have any problems, or questions, send me a messege, and I would be glad to help. I hope you liked this tutorial, please like my videos, and subscribe to my channel.