JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Zoom fade/smoothing</title>
<link href="http://www.magictoolbox.com/static/magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="http://www.magictoolbox.com/static/magiczoom/magiczoom.js" type="text/javascript"></script>
</head>
<body>
<br style="margin-top: 250px" />
<h2>Top zoom with fade and low-speed</h2>
<p><a href="http://www.magictoolbox.com/static/images/r6-large.jpg" rel="zoom-position:top; zoom-width:482px; zoom-height:240px; zoom-fade:true; zoom-fade-in-speed:3000; smoothing-speed:15;" class="MagicZoom"><img src="http://www.magictoolbox.com/static/images/r6-small.jpg" alt="Yamaha R6"/></a></p>
</body>