Mon infobulle n'apparaît pas sous Firefox

Bonjour,

Je crée un site sur lequel j'ai besoin de faire apparaître des commentaires liés à des images ou à des zones particulières d'une image. J'ai utilisé pour ce faire les indications de cette page :

http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS

Voici un extrait de mon code html, pour une zone :

<p>
		<link rel="stylesheet" href="feuille_style_mappage.css" />
		<div class="center">
	<img src="ciel_astral_carre.jpg" width="624" height="600" rel="lightbox" usemap="#ciel_astral_carre"/>
	<map name="ciel_astral_carre">
	<a href="#1">
	<area shape="rect" coords="205,253,397,436" href="#1" span class="hover" span class="focus" />
	<span id="#1"> blabla... commentaire sur l'image/la zone </span>
	</a>
</map>
	</div>
</p>

Ma page CSS :

a span
{
	position: absolute;
	text-align: justify;
	color: #FFFFFF;
	background-color: #858585;
	padding: 15px;
	box-shadow: 0 0 2px #000000;
	transform: scale(0) rotate (-12deg);
	transition: all .25s;
	opacity: 0;
}
a:hover span, a:focus span
{
	transform: scale(1) rotate(0);
	opacity: 1;
	background: #858585;
	box-shadow: 0 1px 0 #FFFFFF;
}

Quand j'ai vu que ça ne marchait pas avec hover j'ai essayé focus, ça ne marche pas non plus.

Quelqu'un aurait-il une solution ?

Du reste, étant sous Mac je n'ai pas essayé non plus avec Internet Explorer, j'espère que ça ne posera pas de problème.