Foros del Web » Creando para Internet » CSS »

[Ayuda, CSS] Imagen de sustitucion con alpha

Estas en el tema de [Ayuda, CSS] Imagen de sustitucion con alpha en el foro de CSS en Foros del Web. Hola bueno, yo tengo 2 imagenes como muestra el siguiente codigo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div class = "producto" >     ...
  #1 (permalink)  
Antiguo 04/11/2010, 13:22
 
Fecha de Ingreso: junio-2008
Mensajes: 97
Antigüedad: 9 años, 6 meses
Puntos: 2
[Ayuda, CSS] Imagen de sustitucion con alpha

Hola bueno, yo tengo 2 imagenes como muestra el siguiente codigo:

Código HTML:
Ver original
  1. <div class="producto">
  2.    <img src="img1.jpg" class="atras" width="168" height="175">
  3.    <a href="#" title="">
  4.         <img src="img2.jpg" class="adelante" width="168" height="175">
  5.     </a>
  6. </div>

Código CSS:
Ver original
  1. .producto {
  2.     float: left;
  3.     width: 168px;
  4.     height: 260px;
  5.     margin-right: 20px;
  6. }
  7. img.atras {
  8.     margin: 0px;
  9.     padding: 0px;
  10. }
  11. img.adelante {
  12.     margin-top: -175px;
  13. }
  14. img.adelante:hover {
  15.     filter:alpha(opacity=0);  
  16.     -moz-opacity: 0;  
  17.     opacity: 0;
  18.     -khtml-opacity: 0;
  19. }

La idea es que la img2 se ponga esactamente arriba de la 1 tapandola y cuando nos ponemos arriba de la 2 se aga transparence... el efecto funsiona lo que pasa es que depende el navegador la img2 se me corre...

alguna ayuda plis
  #2 (permalink)  
Antiguo 08/11/2010, 18:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [Ayuda, CSS] Imagen de sustitucion con alpha

No hay concordancia entre el html y el css
Pero creo que lo podría lograr posicionando la imagen superior (en el eje z) de forma absoluta y al :hover sobre el div contenedor* ocultarla con |display: none| para que el enlace quede accesible y reciba el foco del puntero.

* problema si da soporte a ie6, pues sólo acepta el :hover sobre enlaces. Lo podría solucionar con un cambio de enfoque: alojando las 2 imágenes en el mismo enlace (una de ellas dentro de su span correspondiente). Siempre que no pueda actuar vía background.

Etiquetas: alpha
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




La zona horaria es GMT -6. Ahora son las 11:16.