Simplest rollover/hover technique

I'm curious to know what people think is the current best way to go about a basic roll-over action- JQuery or CSS?

I want a roll-over with these states:

Normal: paragraphs of text within a DIV
Hover: paragraphs of text fade out, a photograph fades in, in same position as text
OnMouseOut: photograph fades out, text fades back in.

DIV & photograph are both known sizes.

90% of CSS-only roll-over effects I've found online are specifically for menus, using sprites, which isn't what I'm after, and the other 10% are bickering about whether :hover is good practise.

I am curious what people think is the most straightforward technique these days- least code, least complexity, most compatible.

Without rollover added yet, HTML is similar to this:

<div id="box1">
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>

CSS is:

#box1 {
    width:403px;
    height:404px;
    background-image:url('../images/bio_square1.jpg');
    background-repeat:no-repeat;
    color:#fff;
}

Solution

As others have said, for cross-browser compatibility jQuery is the way to go. But if you want just CSS here's a quick-and-dirty CSS3 option using transitions: http://jsfiddle.net/wkhQA/2/

Edit: Due to laziness, I only included the webkit prefix for transitions. So I guess test it out in Chrome or Safari. Apologies.