JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<script src="jquery.zoom.js"></script>
<span class='zoom' id='ex3'>
		<img src='http://www.jacklmoore.com/img/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
		<p>Click to activate</p>
	</span>

CSS

.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}

		.zoom img::selection { background-color: transparent; }

		#ex2 img:hover { cursor: url(grab.cur), default; }
		#ex2 img:active { cursor: url(grabbed.cur), default; }

JavaScript

$('#ex3').zoom({ on:'click' });