Menú de presentación en mosaico

Hola amigos!

Pues a ver, mis jefes me han mandado hacer como una especie de sección para su web donde se muestren unos determinados contenidos como en forma de mosaico, con varias imágenes, y que luego al hacer el rollover sobre cada imagen apareza como una especie de descripción del submenú. Algo similar a la página que muestro a continuación: http://www.lucozade.com/

Como se puede ver, la sección derecha se ven varias imágenes haciendo el mosaico. Cuando se pasa el ratón sobre cualquiera se despliega como un espacio negro con letras en blanco. Pues algo del estilo es lo que tengo que hacer. Alguna idea o lugar de referencia? Muchas gracias de antemano

Arma toda la estructura como queres que quede y a los bloques negros los pones en display none, y a cada div que contiene la imagen y el bloque negro le asignas 2 funciones, una en el mouse enter y otra en el mouse leave que son las que controlan que se vea o no el bloque negro.

Saludos!

Hola SinSemilla:


Gracias por tu respuesta. Perdona mi ignorancia, pero soy casi un novato en HTML, hasta ahora me he dedicado casi siempre a Flash. La cosa es, cómo tengo que desarrollar lo que me explicas, con javascript? html5? (Como nota te comento que el documento original está hecho en XHTML 1.0 Strict, por lo que he podido comprobar).

Dejo otro link con un ejemplo mas claro de lo que quiero lograr: http://www.pendragonproductions.com/work

Lo que queremos conseguir es el efecto slide que se produces en las boxes con las imágenes, que están como escondidas y cuando se hace rollover aparecen las cajas azules con el texto.


Espero haberme explicado. Muchas gracias de nuevo.


Saludos!


D.

Tienes dos opciones, con animaciones de jQuery (javascript) o con transiciones de css3, en ambos casos tendrás que estudiar un poco de html y css para lograrlo.

saludos.

Como dice HtrMancera...
Vas a tener que sentar el culo y ponerte a estudiar porque sino... estás complicado...

SinSemilla escribió:

JAJA, lo se lo se, llevo cerca de un par de semanas y me estoy diciendo a mi mismo: "Vaya, me haría falta otra vida para poder aprender todo" . Muchas gracias por vuestras respuestas. De hecho ayer mismo me puse con las transiciones en CSS3 y no se por qué me están dando problems. Si no os molesta os pongo el caso:

en la página HTML tengo puesto el siguiente código:

Código HTML :

<div id="Div1">
</div>

Y luego en una hoja CSS linkada he escrito lo siguiente:

Código :

#Div1{
   background-color: #FFF;
   position: absolute;
   top: 600px;
   left: 150px;
   width: 400px;
   height: 50px;
   -moz-animaton-name:animacion;
   -moz-animation-duration:3s;
}

@-moz-keyframes animacion{
   from{
   width: 400px;
   }
   to{
   width: 600px;
   }
}

Pero nada, no hace absolutamente nada. He probado a ponerse el prefijo "webkit" y probarlo en Safari, pero lo mismo, se queda estática.

Alguna idea?


Muchas gracias amigos.


Saludos.

me respondo a mi mismo... fallo en la escritura

Perdón amigos, se me presenta otro problema:

Cómo puedo hacer para que la animación se detenga al llegar al "to { }" y no se siga repitiendo? Gracias

D.