<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="hubble-container">
  <img src="hubble-extreme-deep-field.jpg" id="hubblepic">
</div>
<input type="range" min="1" max="4" value="1" step="0.1" id="zoomer" oninput="deepdive()">
#hubble-container {
  width: 50%;
  font-size: 0;
  border: 1px solid #111;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 2rem;
}

#hubblepic {
  width: 100%;
}

#zoomer {
  display: block;
  width: 50%;
  margin: 2rem auto;
}
@media all and (max-width: 500px) {
  #zoomer, #hubble-container {
    width: 85%;
  }
}
var zoomer = document.getElementById('zoomer');
var hubblepic = document.getElementById('hubblepic');

function deepdive(){ 
	zoomlevel = zoomer.valueAsNumber;
  hubblepic.style.webkitTransform = "scale("+zoomlevel+")";
	hubblepic.style.transform = "scale("+zoomlevel+")";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.