Estilizar los desplazamientos del mouse sobre mapas de imágenes con CSS

Al crear páginas web interactivas, a menudo es necesario incluir imágenes con áreas en las que se puede hacer clic. Normalmente, esto se logra mediante mapas de imágenes. Sin embargo, diseñar estas áreas al pasar el mouse para proporcionar interactividad adicional ha resultado difícil de alcanzar.

En el pasado, intentar diseñar estas áreas usando CSS ha tenido un éxito limitado, como lo demuestra el ejemplo proporcionado:

area { border: 1px solid #d5d5d5; }

Solución solo CSS

Afortunadamente, existe una solución alternativa sencilla que utiliza solo CSS:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
En este enfoque, se colocan bloques transparentes sobre la imagen, cada uno de los cuales representa un área en la que se puede hacer clic. Al establecer la opacidad en 0 de forma predeterminada y aumentarla a 0,2 al pasar el mouse, se logra un efecto sutil al pasar el mouse.