"Navegar" sobre una imagen

[Jornxx]

Buenos días amigos. Aún no tengo código pero tengo una idea que no se cómo hacer. A ver si me explico:

Tengo un <div> de 500px de width, en el que se va a cargar una imagen de 2000px de width.
Mi idea es que cuando el cursor hace 'hover' sobre la mitad derecha del <div>, la imagen se desplace horizontalmente para poder ver más imagen hacia ese lado y cuando el cursor se coloca en la mitad izquierda del <div>, lógicamente, se desplace la imagen hacia la izquierda.
Espero haberme explicado y que me hayan entendido.
No se si esto es CSS, JQuery, JavaScript o lo que sea, pido disculpas si no está bien colocada en el foro mi pregunta y ruego que la cambien a donde corresponda.

Gracias de antemano a todos.

[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.

[Jornxx]

Esto es exáctamente a lo que me refería y lo que necesitaba. Muchas gracias pzin