Problema opacity e z-index con immagine

fradamma

Utente Attivo
28 Set 2012
93
0
0
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:

Codice:
      <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

Utente Attivo
21 Gen 2014
98
0
0
Ciao! penso puoi provare a fare una regola css in questo modo:
Codice:
.content:hover > img{
   opacity: 0.7;
}
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1
T problema con select dinamica con jquery Javascript 0
A Problema checkout carrello php PHP 2
R Problema al server Domini 0
A Problema nel passare la variabile PHP 0
G Problema update di un database PHP 0
S Problema con spazi bianchi HTML e CSS 4
E Problema motore di ricerca FULL_TEXT PHP 0
Tommy03 Problema durata cookie PHP 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
I PROBLEMA CODICE INSERTION SORT C C/C++ 2
I PROBLEMA CODICE C - INSERTION SORT Presentati al Forum 1

Discussioni simili