jquery-izoomify

https://abiacarl.github.io/jquery-izoomify

jQuery image zoom. MIT license.
You are free to use your own styling whatever you want according to your needs.
Image source from pexels.

Settings

Property	Default	Description
target	false	Parent container
touch	true	Interaction with touch events
url	false	Url of image to display on hover
magnify	1.2	Image zooming or magnification
duration	120	Speed of image zooming in/out
callback	false	Function to be called once loaded

Demo

Default

    
        <div class="target">
            <img src="path/to/image.jpg" alt="..." />
        </div>

        <script type="text/javascript">
            $('.target').izoomify();
        <script>

Data Attribute

    
        <div class="target">
            <img
                src="low-res/image.jpg"
                data-izoomify-url="hi-res/hover.jpg"
                data-izoomify-magnify="1.8"
                data-izoomify-duration="300"
                alt="..."
            />
        </div>

        <script type="text/javascript">
            $('.target').izoomify();
        <script>

Javascript

    
        <div class="target">
            <img src="low-res/image.jpg" alt="..." />
        </div>

        <script type="text/javascript">
        $('.target').izoomify({
            url: "hi-res/hover.jpg",
            magnify: 2.75,
            duration: 450,
            touch: true,
            callback: function () {
                //your code here..
            }
        });
        <script>

Made with love by Carl Lomer Abia