modificare opacità immagine a seguito di onmouseover

[Alhazred]

Su una pagina ho messo 3 immagini/link che portano a 3 diverse aree del sito.

Vorrei che appena arrivati alla pagina dove ci sono le 3 immagini in questione, queste appaiano leggermente offuscate.
Quando si passa col mouse su una di esse, su questa l'effetto "opaco" deve togliersi, per poi riapplicarsi quando il mouse si toglie da sopra l'immagine.
Sarebbe anche carino se la transizione non fosse immediata, ma graduale

Come posso fare?

[ABsecurity Site]

Mi sto arrampicando sui vetri anch'io per questa storia... quindi quoto!

[mxa]

Puoi semplicemente variare l'opacity via CSS, e il corrisponde filter per Explorer. Lo metti di default a 0.7 tipo e sull'hover lo metti a 1.

Se proprio vuoi scomodare javascript puoi usare il fadeTo di jQuery ad esempio.

Scusate, ho appena visto che era stato uppato un thread del 2010.

[ABsecurity Site]

Ho cercato già in rete e provato, ma sembra funzionare solo con i colori (Es.: da #ff23ff a #ff25ff)

[mxa]

Sicuro?

Cosi' hai provato: http://jsfiddle.net/mmarcon/G8jqk/ ?

Se vuoi che vada anche con IE6 devi mettere l'immagine in un elemento <a> altrimenti l'hover viene ignorato.

[ABsecurity Site]

Con me non funziona, l'immagine cambia di colpo anche su browser e computer differenti.

[ZhelezaPHP]

Prova con questo Codice :

[img]LINK IMMAGINE[/img]

[ABsecurity Site]

Il mio problema è far passare un'immagine ad un'altra in modo graduale.
Se si guarda il mio sito, nel footer, si vede il logo semitrasparente che diventa opaco al passaggio del mouse. Sono due immagini differenti. Ora, io devo farle cambiare gradualmente, come il logo di http://www.premiumpixels.com/

[ZhelezaPHP]

Prova a leggerti questo allora..
http://css.html.it/articoli/leggi/33...-con-i-css3/2/

[ABsecurity Site]

Sì, l'avevo già letto.
Ma non riesco a capire come farlo funzionare con le immagini.
A me basterebbe anche un elemento "div" e non "img" per l'HTML, quindi andrebbe bene anche una cosa così:

div#logofooter {
  width: 200px;
  height: 200px;
  background-image:url('logo.png');
 
  transition-property: background-color; /*standard*/
  transition-duration: 2s;
 
  -webkit-transition-property: background-color; /*safari*/
  -webkit-transition-duration: 2s;
         
  -o-transition-property: background-color;      /*opera*/
  -o-transition-duration: 2s;
         
  -moz-transition-property: background-color;    /*firefox*/
  -moz-transition-duration: 2s;
}
  div#logofooter:hover {
  background-image:url('logo-over.png');
}

E quindi poi

<div id="logofooter">[BLANKSPACE]</div>