Comment reproduire un effet d'image en css?

Bonjour, je suis nouveau, et je tatone le css/html/php depuis environ 5 ans...
Dans l'optique de refaire le template (joomla...) du site de mon club, j'ai crée ce dernier sous toshop et actuellement j'essaye différent code pour voir ce que cela donne.

Mon soucis est le suivant, pour la barre de navigation, j'ai fait une image d'hoverlay visible ici


J'aimerais reproduire l'effet sur le texte via le css...
Comment qu'on fait? xD

a{
font-family: Calibri;
outline: none;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
color: #ffffff;
text-align: center;
font-size: 18px;
vertical-align: middle;
line-height: 30px;
}

a:hover { color: transparent; text-shadow: 2px 2px 5px black; }

Bonjour,

Pour faire cela, il faut placer une image dans le code HTML avec un alt reprennant le texte porté par l'image.

L'effet de survol sera ensuite gérer avec JavaScript.

CSS est un langage de mise en page/présentation, ce n'est pas PhotoShop.

...
alors
->quel image faut-il insérer avec un alt? l'effet du texte, le hover ou l'image sans passage du curseur?
->je ne connais absolument rien en JS :s

L'image de base sans hover.

Il existe des scripts clé en main pour faire ce genre d'effet, cela ne demande pas de compétences particulières.