html - append span to hover -

how can append span effected hover transition. i'm trying text span fade image when there mouseover

#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

modify css li fade. target 1 being hovered.

http://jsfiddle.net/xyzzx/13/

change

#grid:hover img {      ...transitions... } 

to

#grid:hover li {      ...transitions... } 

and add

#grid:hover li:hover {      opacity: 1; }