Simplest rollover/hover technique

Question

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;
}

Answer 1

I would typically resort to jquery if there's a need to fade in/out an element.

My HTML would be something like this:

<div id="box">

   <div class="box-img">

         <img src="image.jpg"/>

   </div>

   <div class="box-text">

         Lorem ipsum

   </div>

</div>

Following that my CSS would go something like:

#box{
   width:500px;
   height:500px;
   padding:0;
}

   .box-img{
       position:absolute;
       opacity:0;
   }

   .box-text{
       position:absolute;
   }

And to end off, I will probably use the jquery library for .mouseover() or .hover():

$("#box").hover(
  function () {
    $(".box-img").fadeTo("100,1");
    $(".box-text").fadeTo("100,0");
  }, 
  function () {
    $(".box-img").fadeTo("100,0");
    $(".box-text").fadeTo("100,1");
  }
);

This may not be the optimal method but I suppose the rough idea behind what is possible is somewhere there.

You can see the .hover() in action at jQuery API. The demo there has a live example of something similar to what you may be looking for and it is employing another method.

Hope this helps! =)