Foros del Web » Creando para Internet » CSS »

como hacer este efecto

Estas en el tema de como hacer este efecto en el foro de CSS en Foros del Web. buenas!! resulta que estaba viendo esta pagina pues necesito hacer la mism pero en español http://www.green-pan.com/en/rio-collection-1617.htm y quiero hacer eso que pasa uno el cursor ...
  #1 (permalink)  
Antiguo 15/02/2012, 16:40
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 11 años, 11 meses
Puntos: 4
como hacer este efecto

buenas!!

resulta que estaba viendo esta pagina pues necesito hacer la mism pero en español

http://www.green-pan.com/en/rio-collection-1617.htm

y quiero hacer eso que pasa uno el cursor por el texto y cambia la imagen
(en la parte donde dice available items)

no se si es con js o solo con css pero no se como se llama ese efecto si es que tiene nombre y veo el codigo fuente y no lo decifro

si alguno me puede ayudar le agradezco, por lo menos el nombre del efecto o algun otro similar
  #2 (permalink)  
Antiguo 15/02/2012, 19:05
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 9 años, 10 meses
Puntos: 20
Respuesta: como hacer este efecto

Mmm
Lo que tendrías que hacer es poner un div para cada una de las imágenes que aparecerán, ubicados en la misma posición, lo podrías poner con posición absoluta.
Y luego creas la pseudo-clase hover en cada link para que cambie la imagen del div.
quedaría algo como: " link1:hover .div1 {background-image:....}.
haces esa misma regla para los demás links y sale.

Hace poco hice un menú con esas características, pero no sé si haya una forma más fácil o de simplificar código, pero esa va.

Saludos.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #3 (permalink)  
Antiguo 16/02/2012, 09:51
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 11 años, 11 meses
Puntos: 4
Respuesta: como hacer este efecto

no entendi muy bien, es algo asi como los sprites?
  #4 (permalink)  
Antiguo 16/02/2012, 10:12
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 9 años, 10 meses
Puntos: 20
Respuesta: como hacer este efecto

Pues mira, lo puedes hacer igualmente con sprites que sería mucho mejor (así lo hice yo), pero también lo puedes hacer con varias imágenes.
el compañero C2am me hizo un ejemplo cuando tuve ese problema, acá te dejo el link:
http://jsfiddle.net/c2am/Fjtqq/8/
Si no entiendes algo me dices.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #5 (permalink)  
Antiguo 16/02/2012, 13:33
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 11 años, 11 meses
Puntos: 4
Respuesta: como hacer este efecto

exactamente eso era lo que buscaba! ya lo probe y funciona perfecto, solo un pequeño inconveniente

como hago que no salga el texto, solo la imagen? pues al poner los divs y si borro el texto no salen
  #6 (permalink)  
Antiguo 16/02/2012, 23:22
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 10 años
Puntos: 6
Respuesta: como hacer este efecto

aqui el hover es sobre una imagen pero yo creo que te vale el css lo resumí bastante por lo que lo podrías cambiar sin problemas cv-infirmiere.eu5.org
o si no aqui tambien assofenua.orgfree.com/lienzosheiva.htm saludos polinesia2012.com
  #7 (permalink)  
Antiguo 17/02/2012, 14:30
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 9 años, 10 meses
Puntos: 20
Respuesta: como hacer este efecto

Pues para que no salga el texto tendrías que poner la imágen que desees, y luego le pones un display:inline-block al div para que te contenga la imágen y ya está.
También podrías especificar width y height para el recuadro y así no necesitaría texto para aparecer.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #8 (permalink)  
Antiguo 19/02/2012, 23:03
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 11 años, 11 meses
Puntos: 4
Respuesta: como hacer este efecto

pura vida!

y como podria hacer para que solo la primer imagen quede visible desde el principio?

Etiquetas: efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:55.