Ajouter du flou sur image

**corrupt3d** · 17/08/2007, 11h52

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

**Tober** · 17/08/2007, 11h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**blueice** · 17/08/2007, 21h05

Il suffit de faire une image avec les deux états et ensuite de la décaler en :hover.

**clb56** · 19/08/2007, 10h10

Salut

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

**trotters213** · 20/08/2007, 09h43

Envoyé par clb56

Non, on ne peut pas

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#ta_balise_img {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}

**Candygirl** · 20/08/2007, 10h41

Envoyé par trotters213

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Tober** · 20/08/2007, 11h18

Oui, c'est de ma faute, quand j'ai commencé à parler d'opacity dans mon premier post

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**trotters213** · 20/08/2007, 11h24

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.

**Tober** · 20/08/2007, 11h27

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 !

Ajouter du flou sur image

CSS

Discussions similaires

Partager

Partager