tomemos por caso este html
Código HTML:
Ver original<p id="texto">lorem ipsum... link, img, etc
</p>
luego si lo encaras solo con css, podes hacer esto:
Código CSS:
Ver original#caja{background:url("ruta/imagen.xxx") 0 0 no-repeat; /*otros estilos*/}
#texto{display:none;} /*ocultas el contenido*/
#caja:hover #texto {display:block;} /*lo mostras cuando haces hover en #caja*/
No se si funcionará en ie7-, creo que el bug de ":hover" lo solucionas con esta librería:
http://blog.unijimpe.net/ie5-ie6-estandar-con-ie7js/
Este tipo de cosas se suele hacer con javascript, en mi caso uso jquery, este código te irá bien:
Código Javascript
:
Ver original/*entre <head> o en un archivo externo*/
$(document).ready(function(){
$("#caja").hover(
function(){
$("#texto").fadeIn("slow");
},
function(){
$("#texto").fadeOut(300); /*300 milisegundos*/
}
);
});
Saludos.
me olvidaba:
para el fondo transparente podes usar la propiedad
opacity o un fondo png transparente repetido.