Foncer une image au passage de la souris

Un petit truc pour donner un effet de changement de ton d’une image sur l’évenement hover de la souris. Il suffit de placer l’image à l’intérieur d’un élement DIV auquel on va donner un background de  couleur, dans l’exemple ci dessour la couleur est le noir.

Code HTML :

<div class="fond_image">
<img src="img/image1.jpg" alt="effet sympa sur le survol d'une image" />
</div>

Au passage de la souris sur l’image on affecte à l’image une opacité CSS < 1 de façon à laisser transparaitre la couleur du background. Pour rendre l’effet plus doux, on utilise la propríeté CSS3 de transition afin de changer graduellement l’opacité.

Code CSS : 

.fond_image{
background:#000000;
display:inline-block;
}
.fond_image img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
}
.fond_image img:hover{
opacity:0.8;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
}

On peut jouer sur la valeur de l’opacité et sur la couleur de fond pour donner des effets différents, voir les exemples sur les images ci dessus.