effet sympa sur le survol d'une image
effet sympa sur le survol d'une image
effet sympa sur le survol d'une image

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.

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.