When you are building an e-commerce website, especially a showcase, a website gallery, a template selling website ..., you always need many good images for using and giving your visitors/customers the detailed view of your images (or your product). I believe that every shopping website has ability zoom the product image. All of them are using jQuery plugins such as jQuery Zoom or EasyZoom After I think how would I implements this plugin I realized that we do not need jQuery for that. So let us go step by step and implement image zoom without jQuery.
We will have next html template:
`
` We will display a small image and set the background for figure element with the same image but without scaling. We are going to fade out the image and change background position of figure element based on cursor coordinates.