Mon infobulle n'apparaît pas sous Firefox

Bonjour,

je me permets de reposer ici une question qui n'a pas eu de réponse sur le forum spécialisé CSS.

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 ou la zone mappée </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.

Il me faut préciser que ça fonctionne sur une image seule : on passe la souris, l'infobulle s'affiche à côté.

Quelqu'un aurait-il une solution ?

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

Je remercie d'avance toute personne qui saurait m'aider pour ce problème :)

Configuration: Mac OS X (10.10.5) / Chrome 50.0.2661.86