Effetto opacità in rollover con css

**errecreations** · 15-11-2011, 13:57

Salve a tutti, scusatemi se apro una nuova discussione ma non sono riuscito a trovare nulla che potesse aiutarmi nelle precedenti discussioni, in pratica sto realizzando un portale al cui interno ho diversi div, ogni div ha un immagine impostata come sfondo, ora vorrei ricreare un effetto di rollover, in pratica voglio che al passaggio del mouse l'immagine, con opacità del 50% torni al suo colore pieno, sono riuscito ad impostare l'opacità tramite css con il parametro "opacity" però non sò come fare per far si che al passaggio del mouse l'opacità sparisca.
Aiutatemi grazie mille.

**Mich_** · 15-11-2011, 17:47

codice:

a {
  ...
  opacity: 0.5;
}
a:hover {
  opacity: 1;
}

(potresti dover inserire codici specifici per IE)

**errecreations** · 15-11-2011, 18:54

Ho già provato così ma non mi dà nessun risultato...io provo con Firefox ed IE direttamente da Dreamweaver ma non mi da nessun risultato.
In pratica nel css dove c'è il nome del div alla fine aggiungo la "a" e metto i parametri nelle parentesi graffe poi dopo devo riscrivere il nome del div con l'aggiunta di "a:hover" e nelle parentesi graffe rimettere tutti i parametri o solo inserire quello relativo all'opacità?
Attendo risposta grazie

**Mich_** · 16-11-2011, 09:25

Anziche` provare a descrivere a parole quello che fai in una prosa barocca (o forse e` roccoco`), posta un pezzetto di codice HTML e CSS.
E` piu` facile per te farci capire cosa fai, ed e` piu` facile per noi correggere eventuali errori

**errecreations** · 16-11-2011, 09:55

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="conteiner.css" rel="stylesheet" type="text/css" />
<link href="footer.css" rel="stylesheet" type="text/css" />
</head>

<body background="pattern-sito.jpg">
<div class="container">
<div class="logoheader"></div>
<div class="aboutbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">About</span></div>
<div class="workbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">Work</span></div>
<div class="contactbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">Contacts</span></div>
<div class="primo"></div>
<div class="contenutoabout"></div>
<div class="contenutoabout2"></div>
<div class="secondo"></div>
<div class="titolowork"></div>
<div class="terzo"></div>
<div class="lost"></div>
<div class="arcani"></div>
<div class="homebook"></div>
<div class="sindrome"></div>
<div class="santita"></div>
<div class="plastic"></div>
<div class="quarto"></div>
<div class="titolocontacts"></div>
<div class="quinto"></div>
<div class="contatti"></div>
<div class="modulocontatto"></div>
</div>
<div class="footer"></div>
</body>
</html>
[CODE]

Questo è tutto l'html

[CODE]

@charset "utf-8";
.container {
box-shadow: 1px 3px 10px 1px #000;
width: 700px;
height: 100%;
margin: auto;
background-image: url(pattern-conteiner.jpg);
background-repeat: repeat-y;
height: 1800px;
}.logoheader {
background-image: url(logo.png);
height: 60px;
width: 230px;
margin-left: 20px;
margin-top: 20px;
float: left;
}
.aboutbtn {
display:block;
height: 25px;
width: 85px;
float: left;
margin-left: 165px;
margin-top: 35px;
}
.workbtn {
height: 25px;
width: 85px;
float: left;
margin-top: 35px;
}
.contactbtn {
float: left;
height: 25px;
width: 85px;
margin-top: 35px;
}
.primo {
float: left;
height: 5px;
width: 650px;
border-top-width: 100%;
border-bottom-width: 100%;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
margin-left: 25px;
}
.contenutoabout {
float: left;
height: 390px;
width: 390px;
margin-top: 70px;
margin-left: 20px;
background-image: url(contenutoabout1.png);
background-position: bottom;
}
.contenutoabout2 {
height: 390px;
width: 285px;
float: left;
margin-top: 75px;
background-image: url(scarlet.png);
background-repeat: no-repeat;
background-position: center bottom;
}
.titolowork {
float: left;
height: 45px;
width: 230px;
background-image: url(scrittawork.png);
background-position: center center;
background-repeat: no-repeat;
margin-left: 450px;
margin-bottom: 10px;
margin-top: 10px;
}
.lost {
display: block;
float: left;
height: 175px;
width: 175px;
background-image: url(lost.png);
background-repeat: no-repeat;
background-position: center center;
margin-left: 70px;
margin-top: 50px;
opacity: 0.5;
}
.arcani {
float: left;
height: 175px;
width: 175px;
margin-top: 50px;
background-image: url(arcani.png);
background-repeat: no-repeat;
background-position: center center;
}
.homebook {
float: left;
height: 175px;
width: 175px;
margin-top: 50px;
background-image: url(homebook.png);
background-repeat: no-repeat;
background-position: center center;
}
.sindrome {
float: left;
height: 175px;
width: 175px;
margin-left: 70px;
background-image: url(sindrome.png);
background-repeat: no-repeat;
background-position: center center;
margin-top: 15px;
}
.santita {
float: left;
height: 175px;
width: 175px;
background-image: url(santita.png);
margin-top: 15px;
}
.plastic {
background-image: url(plastic.png);
background-repeat: no-repeat;
background-position: center center;
float: left;
height: 175px;
width: 175px;
margin-top: 15px;
}
.terzo {
float: left;
height: 5px;
width: 650px;
border-top-width: 100%;
border-bottom-width: 100%;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
margin-left: 25px;
}

.secondo {
float: left;
height: 5px;
width: 650px;
margin-left: 25px;
border-top-width: 100%;
border-bottom-width: 100%;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
}
.quarto {
float: left;
height: 5px;
width: 650px;
margin-left: 25px;
border-top-width: 100%;
border-bottom-width: 100%;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
margin-top: 60px;
}
.titolocontacts {
float: left;
height: 60px;
width: 250px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 45px;
background-image: url(scrittacontacts.png);
background-repeat: no-repeat;
background-position: center center;
}
.quinto {
float: left;
height: 5px;
width: 650px;
margin-left: 25px;
border-top-width: 100%;
border-bottom-width: 100%;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CCC;
}
.contatti {
float: left;
height: 155px;
width: 530px;
background-image: url(sfondocontatti.png);
background-repeat: no-repeat;
background-position: center center;
margin-left: 25px;
margin-top: 25px;
}
.modulocontatto {
float: left;
height: 235px;
width: 275px;
margin-left: 25px;
}
[CODE]

Questo invece è il relativo CSS

**Mich_** · 16-11-2011, 10:03

Cosi` non riesco a leggere.
Posta usando correttamente i tag VB (puoi usare i bottoni sopra l'area di inserimento).

E posta solo la parte interessata: non ho tempo per studiarmi tutta la pagina solo per trovare due righe che potrebbero essere errate

**errecreations** · 16-11-2011, 11:21

codice:

.lost { display: block; float: left; height: 175px; width: 175px; background-image: url(lost.png); background-repeat: no-repeat; background-position: center center; margin-left: 70px; margin-top: 50px; opacity: 0.5; }

Questa è la parte del css che m'interessa, come vedi non ho messo la lettera "a" dopo il nome del div che in questo caso è "lost" se lo faccio il div si sballa e non si trova più nella posizione da me inserita...spero di essermi spiegato bene questa volta

**ldetomi** · 16-11-2011, 11:30

Mica tanto purtroppo..... cmq mi pare di intuire che tu hai dei div a cui vuoi cambiare opacità all'hover del mouse, ma poi applichi le regole css sui dei link (usi il tag A)

la psudoclasse :hover si applica all'oggetto su cui fai l'hovering appunto... agirà sui link se sposti il mouse su un link e nel css avria scritto qualche regola per A:hover, mentre agirà sui DIV se porterai il mouse sull'area del DIV stesso e nel css avai creato una regola per DIV:hover
Ciò che non puoi fare in CSS è mettere il mouse sul link e ottenere che mgari tutto il div che lo contiene cambi opacità/sfondo/(qualsiasi cosa). Per ottenere questo devi affidarti a JavaScript

**Mich_** · 16-11-2011, 12:12

Originariamente inviato da errecreations

codice:

.lost { display: block; float: left; height: 175px; width: 175px; background-image: url(lost.png); background-repeat: no-repeat; background-position: center center; margin-left: 70px; margin-top: 50px; opacity: 0.5; }

Questa è la parte del css che m'interessa, come vedi non ho messo la lettera "a" dopo il nome del div che in questo caso è "lost" se lo faccio il div si sballa e non si trova più nella posizione da me inserita...spero di essermi spiegato bene questa volta

Come suggerisce Idetomi, prova ad aggiungere (DOPO la dichiarazione precedente):

codice:

.lost:hover {
  opacity: 1;
}

Funziona nei browser non troppo vecchi. Sicuramente non in IE6, ho dei dubbi per IE7, dovrebbe andare in IE8.
FF in generale lo si trova abbastanza aggiornato, mentre negli altri che sono in giro dovrebbe funzionare.

Nota: non e` molto comune usare :hover su un elemento diverso dal link: controlla che funzioni tutto, perche` potrebebro esserci dei problemi nascosti.

PS: In IE funziona solo se fatto lavorare in modo standard (*). In modo retrocompatibile non credo funzioni.

(*) IE (dal 6 in poi) lavora in modo standard (o quasi) se la DTD e` di tipo strict: (es: HTML 4.0 Strict, XHTML 1.0 Strict, HTML5), lavora in modo retrocompatibile (quirks) negli altri casi, o se manca la DTD.

**errecreations** · 16-11-2011, 12:16

Sono così incapace a spiegarmi

In pratica ho un DIV che ha come sfondo un immagine, questa immagine (opaca del 50%) quando porto il cursore del mouse al disopra dell'immagine e quindi del DIV stesso deve farmi tornare l'immagine con opacità 0%
Poi voglio anche sapere se a questo DIV posso applicare un "lightbox" in pratica dopo aver cliccato sto DIV vorrei che si aprisse una galleria d'immagini....potete aiutarmi

Discussione: Effetto opacità in rollover con css

Strumenti discussione

Ricerca discussione

Visualizza

Effetto opacità in rollover con css

Permessi di invio