Transizione sfondo menù non funziona

[GiuseppeWeb]

Salve a tutti,
sto cercando di far apparire lentamente un'immagine png al passaggio del mouse sopra le voci di un menù. L'immagine sarebbe un'ombra sotto il testo. Purtroppo l'ombra appare senza transizione.

Link del sito:http://www.cantinevinci.altervista.org

Il codice:

 .sf-menu > li > a {
    font: 18px/22px "Copperplate Gothic Light";
    font-weight:300;
    text-transform: uppercase;
    color: #013224;
    display: block;
    padding: 10px 20px;
    line-height: 80px;
    vertical-align:top;
    }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
      background-image: url(http://www.cantinevinci.altervista.org/themes/default-bootstrap/img/ombra.png);
      background-repeat:no-repeat;
      background-size: 100% 100%;
      -webkit-transition-property: background-image 300ms ease-in 200ms; <br/>
-moz-transition-property: background-image 300ms ease-in 200ms; <br/>
-o-transition-property: background-image 300ms ease-in 200ms; <br/>
transition: background-image 300ms ease-in 200ms;
 }

Cosa sbaglio?
Grazie

[Experiment8]

Ciao,

penso che il problema sia che le transition devono essere inserite nella regola di partenza e non sull'hover, dovresti spostarle sulla regola sopra ossia (togliendo i br che sono errati):

sf-menu > li > a {
-webkit-transition-property: background-image 300ms ease-in200ms;
-moz-transition-property: background-image 300ms ease-in200ms;
-o-transition-property: background-image 300ms ease-in200ms;
transition: background-image 300ms ease-in200ms;}

[GiuseppeWeb]

Fatto. Non funziona. Guardando in rete credo di aver capito il principio di massima col quale andrebbe realizzato.
In poche parole si dovrebbero usare due livelli e l'attributo opacity: 0 su uno dei due, che diventa opacity: 1 al passaggio del mouse.
Ho provato ad utilizzare gli esempi che ho trovato, ma combino qualche casino col codice e non funziona.
Avete quanche altro suggerimento?