Al pasar el raton, vuelve a aparecer la imagen con una transicion

nodudu · #1 (**permalink**) 14/07/2011, 07:25

Hola!

Estoy creando una web poco a poco, la verdad que no llevo mucho tiempo conociendo DW así que tengo algunas dudas.

Lo que me gustaría hacer es un portfolio para meter mis diseños. Me gustaría crear el efecto que usan esos dos diseñadores en su
pagina web (al pasar el ratón encima de las imágenes) :

http://www.martacerda.com/#/all
http://www.alextrochut.com/#/works

Que al pasar el ratón encima de la imagen de un proyecto, esa vuelva a aparecer con un movimiento lateral.

He buscado por internet pero la verdad que no he encontrado. Solo he encontrado como cambiar de imagen al pasar el raton encima.

Muchas gracias de antemano!!!
Un saludo

RIVERMILLOS · #2 (**permalink**) 14/07/2011, 08:54

Buscalos efectos que tiene jquery.

saludos

MARCASTELEON · #3 (**permalink**) 14/07/2011, 15:48

Esos ejemplos que pones son hechos en flash.

Se pueden hacer con javascript usando la imagen como fondo de un div y repitiendola en X, y con setTimeout ir cambiando la posicion de fondo cuando el cursor este over.

ó lo puedes hacer con css de esta manera

Código CSS:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head>
 
<style>
#imagen1{ background-image:url("http://www.ocompras.com/images/2009/10/balon-barcelona-de-nick-300x300.jpg");  height:300px; width:300px;}
.imagenes{ background-repeat:repeat-x; background-position:0 0; -moz-transition: background-position .5s; -webkit-transition: background-position .5s;  -o-transition: background-position .5s}
.imagenes:hover{ background-position:300px 0;}
</style>
 
</head>
 
<body >
 
<div id="imagen1" class="imagenes"></div>
 
</body>
</html>

pero lo probe y solo lo soportan firefox, chrome y safari. Talvez Opera necesite alguna propiedad css adicional o de manera diferente. IExplorer no tiene remedio porque ni siquiera soporta transitions.

nodudu · #4 (**permalink**) 16/07/2011, 09:52

Muchas gracias lo voy a probar a ver que tal!
Un saludo

nodudu · #5 (**permalink**) 17/07/2011, 02:07

Es justo lo que buscaba Marco. Quiero intentar ponerlo en Java, ya que como tu dices, el efecto no funciona en IE y mucha gente sigue usandolo desgraciadamente...

Por casualidad, me podrías explicar como sería el codigo JAVA/html de ese efecto? Soy bastante novata y no sé crearlo yo misma... Pero eso, si tienes un hueco libre y si te apetece compartirlo conmigo, serías mi heroe ! llevo mucho tiempo buscandolo.. jeje

Muchisimas gracias de antemano!!!
Un saludo

nodudu · #6 (**permalink**) 01/08/2011, 12:45

Al final despues de horas buscando algun codigo de ese efecto, sigo sin encontrarlo. No sé el nombre de ese efecto de rollover... Alguien puede echarme una mano ? Muchas gracias!