Article image swap/zoom on mouseover

I had implemented "Zoomify" with great success.
See it in action:

http://screencast.com/t/A3ITsCa9C

First, download the plugin from here:

http://www.jqueryscript.net/lightbox/jQuery-Plugin-For-Image-Lightbox-with-Zoom-Effect-Zoomify.html

Open the .zip file and upload the file "zoomify.min.js" as an asset to your theme.
The file is located in the "dist" folder in the .zip

Add the following to the Document Header:

<script src="{{asset 'zoomify.min.js'}}"></script>
<script>
$( document ).ready(function() {
$('.article-body img').zoomify();
});
</script>

Now, add the following to the CSS tab:

/* ------------- Zoomify -------------*/
.zoomify {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}

.zoomify.zoomed {
cursor: -webkit-zoom-out;
cursor: zoom-out;
padding: 0;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
position: relative;
z-index: 1501;
}

.zoomify-shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1500;
background: rgba(0, 0, 0 , .3);
opacity: 0;
}

.zoomify-shadow.zoomed {
opacity: 1;
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}

Save and publish to start zoomifying your article images!

Credit for Zoomify goes to Indri Muska.
This is the project's GitHub's page.

Four years later, this solution still works great and just saved me a lot of trouble. Thanks Tal!

The solution works great! Thanks a lot, Tal!

I didn't have jQuery, so to make it work I had to import jQuery as well:

- Download jQuery: https://jquery.com/download/

- Upload the file "jquery-<version>.min.js" as an asset to your theme.

- The Document Header (document_head.hbs file) should then include the following:

<script src="{{asset 'jquery-3.5.1.min.js'}}"></script>
<script src="{{asset 'zoomify.min.js'}}"></script>
<script>
$( document ).ready(function() {
$('.article-body img').zoomify();
});
</script>

Thanks a lot, Andreas! You have the clearest hint!