Creare un offuscamento sull'immagine

ale90

Creare un offuscamento sull'immagine

Ciao ragazzi, volevo sapere come faccio a fare in modo che l'immagine prima è meno nitida è poi quando con il mouse diventa tutta colorata...

Un'esempio è come quello su questo forum in alto il menù che collega tutte le sezioni...

emnlmn

devi usare la pseudoclasse :hover nel css, che gestisce il passaggio del mouse sopra un oggetto.
creerai due immagini ad hoc da impostare come background nelle due regole che creerai per quell'oggetto.
es:


a {
  background:url(img_chiara.png);
}

a:hover {
  background:url(img_scura.png);
}

ale90

A ok capito tutto E' come farlo per un link dai Grazie mille...

carlitos1982

@Ale90 said:

A ok capito tutto E' come farlo per un link dai Grazie mille...

Molto interessante;)

digital00

@emnlmn said:

devi usare la pseudoclasse :hover nel css, che gestisce il passaggio del mouse sopra un oggetto.
creerai due immagini ad hoc da impostare come background nelle due regole che creerai per quell'oggetto.
es:
a {
 background:url(img_chiara.png);
}

a:hover {
 background:url(img_scura.png);
}

Mmm io non te lo consiglio. IE6 non supporta la trasparenza delle png, e per risolvere a questo ti serve di implementare un javascript. Ma è una cosa pallosa.. io faccio sempre cosi:


#prova {
	background-image: url('image.jpg');
	width: LARGHEZZApx;
	height: ALTEZZApx;
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	-khtml-opacity: 0.80;
	opacity: 0.80;	
}:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}

<div id="prova"></div>

Ovviamente al posto di LARGHEZZA e ALTEZZA i relativi valori.

Ciao!

ale90

@digital00 said:

Mmm io non te lo consiglio. IE6 non supporta la trasparenza delle png, e per risolvere a questo ti serve di implementare un javascript. Ma è una cosa pallosa.. io faccio sempre cosi:

>
#prova {
    background-image: url('image.jpg');
    width: LARGHEZZApx;
    height: ALTEZZApx;
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;    
}:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

<div id="prova"></div>

>```Ovviamente al posto di LARGHEZZA e ALTEZZA i relativi valori.

Ciao!

Ok ottimo grazie ;)
Appena provo ti faccio sapere....

:ciauz::ciauz: