"Navegar" sobre una imagen

[pzin]

Con CSS puedes hacerlo.

Sólo tendrías que crear un contenedor, donde primero pones dos elementos para hacer el hover posicionados de forma absoluta, y a continuación la imagen. Una estructura así:

Código HTML:

<div class="contenedor">
  <span class="izq"></span>
  <span class="der"></span>
  <img src="foto.png">
</div>
 

Como digo, .izq y .der deberían de tener una posición absoluta. Eso serían los controladores. El padre una relativa, y la imagen para moverla una relativa también.

Después usar :hover y el selector ~ para seleccionar la imagen cuando se pasa por encima de uno de esos controles y la mueves donde haga falta. Después puedes usar transition para que quede más bonito.

Código CSS:

div.contenedor {
  position: relative;
  width: 500px;
  overflow: hidden;
}
img {
  position: relative;
  left: -750px;
  transition: left 1.2s ease-in-out;
}
span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
}
span.izq {
  right: 60%;
}
span.der {
  left: 60%;
}
span.izq:hover ~ img {
  left: 0;
}
span.der:hover ~ img {
  left: -1500px;
}
 

Puse un ejemplo usando Sass: http://codepen.io/pzin/pen/xoHsn

Para que quede un poco mejor, los controladores ahí ocupan un 40% del ancho visible de la foto, así al tener el puntero sore el 20% de la mitad de la foto, se ve centrada. Si quieres que ocupen la mitad, simplemente indica 50% donde pone 60%. Pone 60% porque es la distancia de cada controlador al borde contrario.