Using CSS3 for conditional styling?

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/

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

Since you're talking specifically about css3 animation, I assume you don't care about internet explorer, nor older versions of browsers.

With that out of the way, see this fiddle - http://jsfiddle.net/ZYaKh/3/

li { height: 100px; }
li span { height: 0; }

li:hover { height: 150px; }
li:hover span { height: 50px; }

BTW, :hover is simply called a pseudo-class. Also, :hover support on non-link elements is sketchy in IE7 and below.

Animations can be done with the transition property and its sub-properties, plus browser specific prefixes (currently -webkit-, -moz-, -o-, and -khtml-):

transition: height 0.5s ease-in-out; /* transition the height for half a second using 2-way easing */

You can add multiple properties and use a cubic Bézier curve for the easing function, too. Lots of great resources can be found by Googling around.