C'e` un po' di confusione sui termini.
Quello che chiami data, io lo chiamerei occhiello, e quello che chiami sottotitolo e` del testo.

La soluzione corretta XHTML+CSS, sarebbe di inserire tutto in un blocco; poi racchiudere tutte le scritte in un blocco a parte, ed usare

per occhiello e testo, e <h2> per il titolo (supponendo di avere un <h1> come titolo della pagina). In
codice:
<div class="contenitore">
  [img]imm.png[/img]
  <div class="scritte">
    <p class="occhiello">data</p>
    <h2>Titolo</h2>
    <p class="testo">sottotitoloo</p>
  </div>
</div>
A cui corrisponde un CSS del tipo:
codice:
.contenitore {
  width: ...; height: ...;          /* se serve */
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  border: none;
}
.contenitore img {
  width: ...; height: ...;        /* stanno meglio qui che nell'HTML */
  float: left;
}
.contenitore .scritte {
  float: left;
}
.contenitore h2 {
  font-size: 2em;
}
Poi in un futuro prossimo (ma non so quanto prossimo, forse con XHTML 2.0) si potra` scrivere:
<div class="contenitore" href="...">

Per il momento si puo` racchiudere il #contenitore in un <a> cui pero` occorre dare la proprieta`
a {
display: block;
}
Non e` corretto dal punto di vista semantico e/o sintattico, ma i browser potrebbero comportarsi bene (come dici fa FF - con display:block potrebbe comportarsi bene anche IE - fai una prova).

In alternativa (piu` corretto) occorre inserire i tag <a> (tutti uguali) dentro ciascuno dei singoli blocchi (all'esterno di <img>, all'interno dei due

e del <h2>, curando di dare sempre
display: block;
width: 100%; heigth: 100%;

Poi si puo` utilizzare un JS per assegnare una classe diversa a tutto il blocco, tipo:
codice:
function stileHover(ogg,on) {
  document.getElementById(ogg).className = on ? "contenitoreHover" : "contenitoreNorm";
}
dove avrai definito le due classi
codice:
.contenitoreNorm {
  width: ...; height: ...;          /* se serve */
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  border: none;
}
.contenitoreHover {
  width: ...; height: ...;          /* se serve */
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  border: none;
}
La funzione va chiamata con un link del tipo:
<a href="..." title="..." onmouseover="stileHover('ID_OGG',1);" onmouseout="stileHover('ID_OGG',0);">

dove ID_OGG sara` definito nei singoli blocchi con l'attributo id.

PS: il JS in questione opera solo una modifica estetica della pagina, pertanto non e` contrario all'accessibilta`.


Non so se sono stato chiaro (forse sono troppo conciso), altrimenti chiedi di nuovo.