Las imagenes las puedes tomar de bestbuy de productos aleatorios o inclusive usar servicios como http://placehold.it/
Cuando se haga hover en la tabla de imagenes abajo se debe de cambiar la imagen de producto. (perdon pero no pude subir la imagen pero explicare como:
La imagenque se debe mostrar al pasar el mouse

y a qui la explicacion de la imagen
en una tabla en donde se debe mostrar arriaba la imagen






solo encontre un codigo que si me sirve pero no puedo mover la imagen que se muestra
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="est/mov.css">
<title>Documento sin título</title>
</head>
</div>
<body>
<div id="contenedor">
<a href="javascript:void(0);" class="miniatura">
<img src="imagenes/1.jpg" alt="" style="width:100px;" />
<span><img src="imagenes/2.jpg" alt=""/></span></a>
</div>
</body>
</html>
---------------------------------------------------CSS
/* CSS Document */
/* CSS Document */
#contenedor {
position:absolute;
}
.miniatura{
y-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position:inherit;
text-decoration: none;
visibility:hidden;
border: 0px;
top:-500px;
//*left:-40px;*//
above:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
y-index: 10002;
}
Espero que me ayuden y si necesitan mas explicacion con gusto, gracias