CSS3 transition - css

Question

I have this page here (work in progress) http://kimwilddesigns.com/index_new.htm
In this section, I want to be able to hover on the li, have the background image fade out and the h2 to fade in. Is this possible with transitions? I might not be setting it up correctly but I wanted to see if this kind of effect is even possible.
<div id="categories-wrapper">
<ul>
<li class="fine-art"><img src="pics/hp_icon_fine-art.jpg" alt="fine art" width="290" height="240" border="0">
<h2>fine art work</h2>
</li>
<li class="gd">graphic design work</li>
<li class="students">my students' work</li>
</ul>
</div>

Answer 1

Yes, this works nicely with CSS transitions, something like that:
#categories-wrapper li a {
position:relative;
display: block
}
#categories-wrapper li h2 {
position: absolute;
left: 20px;
top: 20px;
opacity: 0;
}
#categories-wrapper li h2,
#categories-wrapper li img {
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
#categories-wrapper li:hover h2 {
opacity: 1
}
#categories-wrapper li:hover img {
opacity: 0
}
See the Fiddle for this, slightly changed your markup by putting the h2 inside of the a tag.