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;

}