Ciao a tutti,
è la prima volta che scrivo su un forum in cerca di aiuto e spero davvero possiate aiutarmi.
Spero sia la sezione giusta...
Dunque sto cercando di realizzare un rollover che al passaggio del mouse mi porti l'opacità di questa immagine al 100% e all'uscita ritorni al 60% come da partenza.
L'immagine è questa:
Schermata 2014-01-24 alle 20.59.17.jpg

I' HTML:

<div class="didascalia">
<a href="#">
<img src="http://localhost:8888/wordpress/wp-content/uploads/2014/01/mrc-1-1.jpg" alt="" />
<span>Calendari e blocchi</span>
</a>
</div>

e il css:

div.didascalia img {
border: 0;
display: block;
opacity: 0.6;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out; }

div.didascalia img:hover { opacity: 1; }

div.didascalia a {
position: relative;
float: left;
color: #FFF;
text-decoration: none;
display: block; }

div.didascalia span {
position: absolute;
bottom: 0;
width: 100%;
padding: 3px 0;
color: #FFFFFF;
background-color: rgba(35,31,32,0.75);
cursor: pointer;
text-align: center;
height: 50px;
font-size: 10px;
font-family: "Open Sans", Arial, sans-serif;
line-height: 50px; }

Quello che vorrei ottenere è un fade dell'immagine ma non della didascalia, che vorrei restasse immutata ma vorrei facesse parte comunque del link.
Mi spiego meglio, se vado col mouse sopra l'immagine ottengo ciò che voglio ma se vado sulla didascalia, ovviamente non succede nulla.
Se assegno il fade al link intero anche la didascalia prende l'opacità, cosa che vorrei evitare.
Non voglio utilizzare 2 immagini in cross-fade, che sarebbe più semplice ma non darebbe lo stesso risultato visivo soprattutto sulla pulizia del testo.
Si può fare con i Css? o con Javascript?

Vi ringrazio anticipatamente.