Semantic markup for image caption rollovers?

I'm working on an image caption rollover effect for my site and it's pretty much done. I'm using a combination of CSS and jQuery.

It looks something like this...

It works well. The caption appears to the left of the image whenever you mouseover the image.

However, I'm getting a warning in Visual Studio that an h2 tag cannot be placed inside of a label according to XHTML 1.0 Transitional.

Here's the markup I'm working with...

<ul>
    <li>
        <a href="/controls/27/saturation-rollover-effect">
            <label class="info">
                <h2>Saturation Rollover Effect</h2>
                <p>Product description here...</p>
            </label>
            <img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
        </a>
    </li>
</ul>

I've also tried a span in place of the label, and I get the same message. I've also tried a div, but div's are not supposed to be inside of the a tag.

I'd prefer to keep all of this inside of the link like I have it to get the SEO benefit fr开发者_JAVA百科om the text. But I'd also like to be XHTML Transitional compliant, and semantic/meaningful at the same time. Any ideas?

A label is for form elements--not images.

An h2 is acceptable, though you'd typically want to use that for larger blocks of content usually.

HTML5 has introduced figure and figcaption which might be appropriate in this situation:

http://html5doctor.com/the-figure-figcaption-elements/

As for wrapping it in an a tag, that probably doesn't make sense unless the href resolves to a valid URI sans JavaScript. Since it's a roll-over effect, clicking a link woudldn't be applicable.

After a little rethink I came up with something that works and makes sense, I think...

<ul>
    <li>
        <div class="info">
            <h2><a href="/controls/27/saturation-rollover-effect">Saturation Rollover Effect</a></h2>
            <p>Product description here...</p>
        </div>
        <a href="/controls/27/saturation-rollover-effect"><img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" /></a>
    </li>
</ul>

I had to break the caption away from the link around the image. Then I added a link around the title of the product (which is probably more useful for SEO anyway). And this is valid XHTML. Thanks to David Thomas and BoltClock for the comments.

UPDATE:

This is live on my site now. It's functional in IE8, but not quite as pretty as it is in IE9, Chrome, or Firefox. And then I might make the thumbnails grayscale for a cleaner look. Overall it seems to work pretty well though... http://www.silverlightxap.com/