Filtre de couleur au survol [Résolu]

Salut,

Je pense que tu ne pourras obtenir l'effet voulu que si ton image est sur un fond blanc.
Ceci dit utiliser ce filtre, je ne sais pas si cela fonctionne sur tous les navigateurs.

Sinon tu as une solution bien plus simple qui, elle, fonctionnera sur tous navigateurs. Faire un rollover à base d'images :
- Tu enregistre deux images dans chacun des états, et tu fais appel à l'une ou l'autre pour chaque bon état de survol.
- Ou tu utilise les portes coulissantes, en regroupant tes deux états dans ton image, et en déplacant l'image dans le fond de ton lien.

Merci pour ton aide.

Je ne veux pas opter pour la solution du rollover parce que ces images seront amenées à changer régulierement, et je ne veux pas avoir à faire deux images à chaque fois. Je pourrais en faire faire deux par Php, mais je n'ai pas envie de me lancer dans la création d'un formulaire avec travail sur l'image...

Si quelqu'un à une idée ? Je suis sur que le css doit pouvoir faire ça quand-même non ? Juste appliquer un flitre d'une couleur avec opacité 50% au survol ?

Bonne soirée !

Oui, j'ai pensé à cette solution et je l'ai bien retournée dans tout les sens...
Logiquement, ça devrait marcher, mais... malheureusement non !
Quand je survol, l'image s'assombrit toujours au lieu de s'éclaircir.

J'ai essayé ça :

.rollopaque img {
  opacity: 1.0;
  filter:alpha(opacity=100);
  border:0;
  }

.rollopaque:hover img {
  background:#FFF;
  opacity: 0.5;
  filter:alpha(opacity=50); 
   border:0; 
   }

et puis aussi avec background-image

Merci beaucoup pour ta remarque, je pense qu'on va dans le bon sens, mais bon...
Modifié par lesfabuleux (17 Aug 2006 - 18:00)

Attention, je pense que :

.rollopaque:hover img {
  background:#FFF;
}

n'aura pas le même rendu que :

.rollopaque:hover {
  background:#FFF;
}

dans le premier cas, la couleur de fond et l'opacité sont appliqués à l'image, alors que dans le second cas, le fond sera appliqué à l'élément contenant l'image, et là ça devrait fonctionner (tu aura bien un fond blanc entre l'image et le fond de la page)

Il faudrait spécifier autre chose :

a.rollopaque {
	display: -moz-inline-box;
	display: inline-block;
}
a.rollopaque:hover {
	background: #FFF;
}

« -moz-inline-box » n'est pas vraiment l'équivalent d'« inline-block », mais pour cet usage ça devrait suffire
Modifié par Alan (17 Aug 2006 - 19:16)

Merci beaucoup !

J'ai essayé la dernière solution telle quelle, mais ça ne semblait pas fonctionner. J'ai donc suivi les conseils de Mr Patate, et ça marche très bien.

Au final, il fallait donc faire

.rollopaque img {
  opacity: 1.0;
  filter:alpha(opacity=100);
  border:0;
  }

.rollopaque:hover img {
  opacity: 0.5;
  filter:alpha(opacity=50); 
   border:0; 
   }
   
.rollopaque:hover {
  background:#FFF;
}

Merci pour votre aide !

Bonsoir,
Il ne fallait pas essayer juste ce code, mais ajouter le reste puisque ce morceau consistait juste à passer de inline à inline-block.

Pour être un peu plus précis : inline-block est dans ce cas inutile à Internet explorer et utile pour Firefox et Opera sauf si l'image est assez petite ou s'il y a déjà une autre propriété faisant l'affaire comme float par exemple ou display:block.
Sinon le fond blanc risque de n'apparaître que sur une hauteur de ligne seulement.

Voir cet exemple

Edit : par ailleurs opacity: 1.0; n'a ici aucun effet
Modifié par Alan (18 Aug 2006 - 01:10)