Style des survols de cartes d'images avec CSS

Lors de la création de pages Web interactives, il est souvent nécessaire d'inclure des images avec des zones cliquables. Généralement, cela est réalisé à l’aide de cartes d’images. Cependant, styliser ces zones au survol de la souris pour fournir une interactivité supplémentaire s'est avéré difficile.

Dans le passé, tenter de styliser ces zones à l'aide de CSS a rencontré un succès limité, comme le démontre l'exemple fourni :

area { border: 1px solid #d5d5d5; }

Solution CSS uniquement

Heureusement, il existe une solution simple utilisant uniquement CSS :

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
Dans cette approche, des blocs transparents sont placés sur l'image, chacun représentant une zone cliquable. En définissant l'opacité sur 0 par défaut et en l'augmentant à 0,2 au survol, un subtil effet de survol de la souris est obtenu.