Using CSS3 for conditional styling?

Question

Ok, so here's the scenario:

Say I have a setup like this:

<ul>
    <li>
        <span></span>
    </li>
</ul>

And I'm using CSS to set styles for the li's to be large floating boxes... Using css's :hover and :active (conditions?) to change the style, such as the background color and height and so on...

Now, question - Using JUST css, can I define it so that:

• Natively, Li's have 100px height, and the span has 0px height
• on Hover, the li's height increases to 150px, and the span's height increases to 50px?

This will result in an animation that looks like a box with plain text, when hovered upon will reveal an image to supplement the text.

EDIT - Here's a link to a fiddle demonstrating what I was aiming for. The yellow portion is supposed to be an external image. This was achieved by implementing the solution provided within this question.

http://jsfiddle.net/abhi/JMz8F/2/embedded/result/

Answer 1

li { height: 100px }
li > span { display: none; height: 50px }
li:hover { height: 150px }
li:hover > span { display: block }