index.html

<!doctype html>
<html lang="en" dir="ltr">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Magnify an image on hover by turning the cursor into a loupe">
	<link rel="stylesheet" href="demo/css/core.min.css">
	<link rel="stylesheet" href="demo/css/image-loupe.css">
	<link rel="stylesheet" href="demo/css/demo.css">
	<title>Image Loupe JS</title>
</head>

<body class="demo">

	<div class="container">

		<header class="row sm">
			<h1 class="title"><a href="https://github.com/alecrios/image-loupe-js">Image Loupe JS</a> (Demo)</h1>
			<hr>
		</header>

		<main class="row sm">
			<img src="demo/img/fruit.jpg" alt="Fruit" data-loupe-image>
		</main>

	</div>

	<script src="demo/js/image-loupe.js"></script>
</body>

</html>