Problema opacity e z-index con immagine

[fradamma]

Buongiorno ragazzi.
Vorrei capire se è possibile fare la cosa che qui vi espongo solo lato css oppure dovrò ricorrere a javascript/jquery.
Ho la seguente situazione:

      <ul class="wrapper">
               <li class="content">
                        <img src="immagine1.png" class="" />  
                        <a href="#" >Bottone</a>
                        <span class="wrap_title">
                              <span class="num">Titolo</span>
                               Nome immagine
                        </span>

              </li>
      </ul>

dentro un <li> avrò un'immagine, un'ancora e uno span (che a sua volte ne conterrà un altro) sullo stesso livello. Con position e z-index devo porre l'immagine sotto tutto quanti gli altri elementi (con width:100% del <li> e altezza fissa in px) lo span del titolo poco sotto all'immagine ("wrap_title"), ma soprattutto l'ancora sarà un bottone posto SOPRA l'immagine. Tutto qui me la cavo da solo. Il problema è che l'effetto grafico che devo produrre è che quando il mouse andrà sopra l'immagine devo diventare opaca (per questo c'è la regola opacity css) ma l'ancora del button in display block assolutamente NO! Come posso fare, è possibile fare questo solo con i css e lo z-index?

Grazie a tutti e buon pomeriggio

 

[LorenzoPi]

Ciao! penso puoi provare a fare una regola css in questo modo:

.content:hover > img{
   opacity: 0.7;
}

 

[fradamma]

In effetti, la regola non fa altro che dire: "se sono sul'<li> con il mouse, modificami l'opacità SOLO dell'immagine che è contenuta all'interno". Mi sbaglio? Cmq funziona egregiamente. Mi modifica l'opacità dell'immagine e non dell'ancora che è posta sopra di essa. Grazie mille!

 

[LorenzoPi]

sisi prego!