html - スパンをホバーに追加

Question

スパンを追加して、ホバー遷移によっても影響を受けるようにするにはどうすればよいですか。マウスオーバーがあると、スパンからテキストが画像のようにフェードするようにしようとしています

#grid li span {
  color: white;
  display:block;
  bottom:250px;
  position:relative;
  width:180px;
   }

#grid li {
 float: left;
 margin: 0 40px 75px 0px;
 display:inline;
 position:relative;
   }

#grid li a:hover img {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  opacity: 1;
    }

#grid:hover img {
 -webkit-transition: opacity .3s ease-in;
 -moz-transition: opactiy .3s ease-in;
 -ms-transition: opacity .3s ease-in;
 -o-transition: opacity .3s ease-in;
 transition: opacity .3s ease-in;
 zoom: 1;
 filter: alpha(opacity=100);
 opacity: 0.3;
   }

jsfiddle