A fairly simple piece of HTML, prompted by a question on Friday from one of my second-year students regarding use of the range input with images.

The HTML:

<div id="hubble-container">
	<img src="hubble-extreme-deep-field.jpg" id="hubblepic">
</div>
<input type="range" min="1" max="5" value="1" step="0.1" id="zoomer" oninput="deepdive()">

The CSS:

#hubble-container {
	width: 50%; font-size: 0;
	border: 1px solid #111;
	overflow: hidden;
	margin: 0 auto;
}
#hubblepic { width: 100%; }
#zoomer {
	display: block;
	width: 50%;
	margin: 2rem auto;
}

And the JavaScript for the slider:

var zoomer = document.getElementById('zoomer'),
hubblepic = document.getElementById('hubblepic');
function deepdive() {
	zoomlevel = zoomer.valueAsNumber;
	hubblepic.style.webkitTransform = "scale("+zoomlevel+")";
	hubblepic.style.transform = "scale("+zoomlevel+")";
} 

There are a few limitations to the technique, at least as it is currently employed here:

• The zoom only dives to the center of the image: there’s no way to explore the corners or sides, although that could be added with a little more JavaScript.
• The lack of support for <input type="range"> in older browsers mean they must be catered to with a polyfill for the element.
• The entire, full-resolution image must be loaded before it can be dived into. srcset and the picture element might help with that; short-term, you could substitute higher-resolution images at certain zoom sizes with JavaScript.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/waxZGv