JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://pcvector.net/uploads/demo/scripts/image_effects/loupe/jquery.loupe.min.js"></script>
<a class="demo" href="http://pcvector.net/uploads/demo/scripts/image_effects/loupe/1.jpg">
<img src="http://pcvector.net/uploads/demo/scripts/image_effects/loupe/thumb_1.jpg" width="180" height="240" />
</a>
<img class="demo" src="http://pcvector.net/uploads/demo/scripts/image_effects/loupe/2.jpg" width="180" height="240" />
CSS
.demo {
float:left;
}
a img {
border:none;
}
.demo {
position:relative;
}
.loupe {
background-color:#555;
background:rgba(0, 0, 0, 0.25);
border:5px solid rgba(0, 0, 0, 0);
cursor:url(http://pcvector.net/uploads/demo/scripts/image_effects/loupe/blank.png), url(http://pcvector.net/uploads/demo/scripts/image_effects/loupe/blank.cur), none;
}
JavaScript
$('.demo').loupe();