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

Default
,

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. 

4 Réponse

Default
,

en effet, merci beaucoup ! liteblue

Default
,

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...

Default
,

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

35773
,

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 !