Capa transparente delante de imagen

[xenon254]

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.

[sortega]

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).

[xenon254]

Buenas

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

Un saludo

[xenon254]

Hola

Al final lo que me vino a la cabeza no me sirvió. A alguien se le ocurre algo.

[Mikmoro]

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

No imagino bien la idea.

[xenon254]

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.

[kseso?]

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?

[xenon254]

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.

[kseso?]

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

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

[xenon254]

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

[xenon254]

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>