Problema opacity e z-index con immagine

F

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
 
L

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;
}
 
F

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!
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 1
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
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

Discussioni simili

Alto Basso