28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerai faire une sorte de rollover, à l'aide d'une image en jouant sur l'opacité.
Mais evidemment, IE et FF ne réagissent pas de la même manière.

Pour vous faire une idée, ça se passe ici : http://pinguinoweb.free.fr/v3/wp/index.php

Voilà mon code :

<a href="#" class="rollopaque"><img src="image.png" /></a>


et


 a.rollopaque img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:1px solid #663333;
 padding:0; 
height:
  }
a.rollopaque:hover img {
  filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;  
  }


J'ai donc dû rater quelque chose ...
Si quelqu'un a une idée, ça serait formidable.

Par avance merci.
Bonjour,

filter:alpha(opacity=100); ne marchera à priori que sur un élément de type bloc doté du layout (cf. concept de HasLayout, chez Laurent Denis ou ici même dans la FAQ du forum). Ce n'est pas le cas d'une image. Donc ça ne marche pas.

Si le lien est en display: block, et qu'on lui confère le layout (par exemple avec un zoom: 1 ou une propriété height ou width ou float), ça devient jouable, mais il faut appliquer l'opacité au lien et non pas à l'image.

En passant, tu as une propriété height sans valeur à la fin de ton premier bloc de déclarations.