Ajouter du flou sur image

Version imprimable

17/08/2007, 11h52
corrupt3d

Ajouter du flou sur image

Bonjour,

J'aimerais savoir si c'est possible d'ajouter du floue sur une image quand on passe avec la souris dessus (une méthode sans devoir créer une image net et une image floue où l'on change juste d'image au passage de la souris).

Si oui comment ? Merci d'avance ;)

Code:

1 2 3 4 5 6 <html> <body> <img src="image.jpg" /> <img src="image.jpg" style="filter: alpha(opacity=50);" /> </body> </html>
mais il me semble que ca ne marche que sous IE

17/08/2007, 21h05
blueice

Il suffit de faire une image avec les deux états et ensuite de la décaler en :hover.
19/08/2007, 10h10
clb56

Salut

Citation:

Envoyé par corrupt3d

une méthode sans devoir créer une image net et une image floue où l'on change juste d'image au passage de la souris

Non, on ne peut pas
20/08/2007, 09h43
trotters213
:salut:

Citation:

Envoyé par clb56

Non, on ne peut pas

Si on peut mais ce n'est pas valide CSS :
Code:

1 2 3 4 5 6 #ta_balise_img { opacity: 0.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; }
20/08/2007, 10h41
Candygirl
Citation:
Envoyé par trotters213

:salut:
Si on peut mais ce n'est pas valide CSS :

Code:

1 2 3 4 5 6 #ta_balise_img { opacity: 0.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; }
Euh, pour moi ça c'est rendre une image transparente, pas floue ;)

Oui, c'est de ma faute, quand j'ai commencé à parler d'opacity dans mon premier post :oops:
blueice a la bonne solution : une image avec les deux états l'un en dessous de l'autre, et ensuite grâce à :hover en css, tu décales la position :
pour une image de 100*100 donc les deux états 200*100 (donc décalage de gauche a droite
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <style type="text/css"> div{ width:100px; height:100px; border:1px solid black; background-image:url(ton image à deux états); } div:hover{ background-position:-100px 0px; } </style> <script> </script> </head> <body> <div><div> </body> </html>

20/08/2007, 11h24
trotters213

Citation:

Envoyé par Candygirl

Euh, pour moi ça c'est rendre une image transparente, pas floue ;)

Ouf, désolé, autant pour moi.
Le problème c'est qu'il veut le faire avec une seule image. Je vois pas trop comment faire à part en faisant un traitement en PHP sur l'image.
20/08/2007, 11h27
Tober

Citation:

Envoyé par trotters213

Ouf, désolé, autant pour moi.
Le problème c'est qu'il veut le faire avec une seule image. Je vois pas trop comment faire à part en faisant un traitement en PHP sur l'image.

Et ce que j'ai mis ça marche avec une image ! :(