Modifier l'opacité d'une image avec hover / CSS

nnk
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code CSS.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire
Je souhaite qu'une image change d'opacité lorsque la souris passe dessus en prenant une couleur bleue de l'arrière-plan. 


Entourez votre code pour bien le mettre en forme
J'indique la couleur d'arrière-plan de l'image :
.wp-image-81 {
background-color:#56c7d1
}

et puis le changement d'opacité quand la souris passe dessus :
.wp-image-81:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

### Ce que je veux

Une image qui devient transparente et bleutée. 

### Ce que j'obtiens

Apparemment, je n'arrive pas à indiquer correctement la couleur de l'arrière-plan de l'image, car le navigateur ne le prend pas en compte.
Deuxième problème, lorsque j'applique uniquement le code pour changer la transparence avec hover, il y a une ligne noire qui s'affiche au milieu de l'image...

Merci par avance pour votre aide.

6 réponses

Soundboy39
Réponse acceptée

Pour la ligne au millieu cela va être plus compliqué sans constater le problème... je peux éventuellement te proposer 2 pistes :

  • essayer de faire un clic droit > "inspecter..." sur cette ligne pour voir s'il ne s'agit pas d'un élement html parasite où une propriété CSS mal foutue;
  • essayer avec un ou plusieurs autres navigateurs...
kelsein

en effet, merci beaucoup ! liteblue

000Bo

bonjour,
regarde bien si tu n'as pas de code qui ne veut rien dire (commentaires non fermés, accolades manquantes, etc...) dans ton code css car moi quand j'execute ton code tout va bien ou alors je ne comprend pas ce que tu veux...

nnk
Auteur

Bonjour, merci pour le message. C'est bizarre, chez moi ça ne fonctionne pas dans mon thème wordpress...

Soundboy39

Bonjour,

Je n'ai pas tout compris les précedents échanges... du coup je ne sais pas si le problème est toujours d'actualité.

Ce que je peux dire, c'est qu'appliquer un "background-color" sur une image n'a aucun sens, puisque le navigateur ne peut pas gérer l'arrière plan d'une image, contrairement à un bloc de type DIV, P, UL ou autre...

Pour faire ton effet, il faut que tu cache une forme (en SVG par exemple) sous ton image (position: absolute...), forme qui aura la couleur d'arrière plan souhaitée. Ensuite tu baisse l'opacité de ton image au moment où tu la survole... et là tu a ta forme en dessous (c.a.d ton arrière plan...) qui apparait !

nnk
Auteur

OK, merci. Mais j'ai toujours le problème de la ligne noire horizontale qui traverse mon image en plein milieu....