Foros del Web » Creando para Internet » CSS »

Capa transparente delante de imagen

Estas en el tema de Capa transparente delante de imagen en el foro de CSS en Foros del Web. Buenas a todos Necesito que delante de una imagen al ponerme encima de ella (hover), me aparezca una segunda, (imagen del mismo tamaño, por supuesto), ...
  #1 (permalink)  
Antiguo 07/08/2008, 04:59
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Pregunta Capa transparente delante de imagen

Buenas a todos

Necesito que delante de una imagen al ponerme encima de ella (hover), me aparezca una segunda, (imagen del mismo tamaño, por supuesto), pero traslucida (alpha 40%).

En esta segunda imagen semitransparente ira algún icono y texto tipo "Pulse aquí para ampliar la imagen".

Se que he visto algo de este estilo hace algún tiempo pero no encuentro este recurso.

Gracias de antemano y un saludo.
  #2 (permalink)  
Antiguo 07/08/2008, 12:49
 
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 148
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: Capa transparente delante de imagen

Pues yo no soy experto, pero suponinedo que lo que quieres es algo como la imagen de abajo a la izquierda de la página http://www.workshop-a.com/, lo que yo haría sería editar esa misma imagen en Photoshop o Gimp o alguno por el estilo y ponerle una capa negra con tanta transparencia como quieras...

Claro, eso suponiendo que manejas uno de estos programas de diseño; en caso contrario, no tengo idea de cómo se puede hacer sólo con CSS (y dudo que realmente se pueda hacer).
  #3 (permalink)  
Antiguo 07/08/2008, 13:32
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Capa transparente delante de imagen

Buenas

No es lo que quería pero me acabas de dar una idea brillante. Gracias Sortega.

Un saludo
  #4 (permalink)  
Antiguo 08/08/2008, 02:29
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Capa transparente delante de imagen

Hola

Al final lo que me vino a la cabeza no me sirvió. A alguien se le ocurre algo.
  #5 (permalink)  
Antiguo 08/08/2008, 02:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Capa transparente delante de imagen

¿Y como vas a hacer aparecer los iconos y el texto que dices al pasar el ratón?

No imagino bien la idea.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 08/08/2008, 02:47
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Capa transparente delante de imagen

Imaginaros una imagen pequeña que al posicionarte aparece otra encima del mismo tamaño pero medio transparente (alpha 50%).

Esta segunda imagen creada con phostoshop, gimp u otro software tendrá un texto en el que diga "Pinche aquí para ampliar la imagen" y un pequeño dibujo de una flecha o algo así, con esto me refería a un icono.
  #7 (permalink)  
Antiguo 08/08/2008, 12:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Capa transparente delante de imagen

pregunto en mi ignorancia y sin haber comprendido muy bien lo que quieres hacer:
¿no te sirve realizar una imagen para a:active y para el hover diseñar una segunda imagen con esas características que dices?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 13/08/2008, 05:47
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Capa transparente delante de imagen

Buenas

Eso es lo que necesito kseso? pero no se como indicarle que la segunda capa que aparezca por encima sea transparente. Además que tiene que funcionar en Ie y Firefox.

Alguna idea?.

Gracias y un saludo.
  #9 (permalink)  
Antiguo 13/08/2008, 12:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Capa transparente delante de imagen

Hola Xenon254
Si tienes tu página con css es muy fácil indicarle que cambie la imagen al posicionar el ratón sobre el enlace con
Cita:
a:link {
url(ruta/tuimagen.ext;
}
background:
a:hover {
background: url(ruta/tuimagen.ext;
}
Como no has dicho cómo tienes maquetada tu página (CSS o tablas) no se si esto lo tengas que incluir en el head o en el syle.css
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 14/08/2008, 02:09
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Capa transparente delante de imagen

Buenas

Gracias por tu tiempo. La estoy haciendo en tablas. Voy a intentar lo que me dices y si no te pediré de nuevo ayuda

Un saludo
  #11 (permalink)  
Antiguo 14/08/2008, 03:33
 
Fecha de Ingreso: noviembre-2007
Ubicación: Zamora (Spain)
Mensajes: 251
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Capa transparente delante de imagen

Buenas

Esto es lo que tengo creado en la prueba

Código:
<style>
.imagen{
background-image: url(fto1.jpg);
	height: 400px;
	width: 400px;
}
.imagen a:hover{
background-image: url(fto2.jpg);
	height: 400px;
	width: 400px;
}
</style>

Código:
<table border="0" cellpadding="0" cellspacing="0" width="300" id="table1">
	<tr>
		<td class="imagen"></td>
	</tr>
</table>
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 04:23.