Mettre vos images en surbrillance au survol

Mettre vos images en surbrillance au survol

Une simple règle css permet de rendre un peu plus opaque vos images, et de les faire briller au survol de la souris. Regardons les deux css suivants:

.cadre img{
    width:150px;
    height:140px;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity:0.8;
    border-radius :50%;
    float:left;
    margin:20px;

}
.cadre img:hover{

    width:150px;
    height:140px;
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity:1;

}

Ici, je pars d’une opacité à 0.8 pour la rendre à 1 au survol. J’aurai ainsi une image un peu floutée, et qui redevient normale au survol..Cela est censé rendre encore plus évidente la navigation pour l’utilisateur.
La propriété alpha permet de faire fonctionner la propriété même sur les vieilles version d’IE.

Si l’on met de coté IE, la propriété opacity suffit, ce qui donnerait :

.cadre img{
    width:150px;
    height:140px;
    opacity:0.8;
    border-radius :50%;
    float:left;
    margin:20px;

}
.cadre img:hover{

    width:150px;
    height:140px;
    opacity:1;

}

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.