Effet de surbrillance

Comment donner un effet de surbrillance lors du survol de la souris ?

Facile, cela se fait par CSS !

Mettre en surbrillance

Résultat recherché

Supposons une liste d'images :

Lorsque la souris passe au-dessus d'une des images, on désire la mettre en surbrillance :

Méthode

1. On crée un parent avec fond blanc.
2. On place l'image dans le parent
3. Lorsque la souris passse au-dessus de l'image, on change son opacité pour laisser passer le blanc du fond

HTML

<div class="card border-0 bg-white">
    <img class="card-img" src="img/EGS_ClosetotheSun.webp" alt="Close to the sun">
</div>

CSS

.card-img:hover {
    opacity:0.7;
}

Ombrager les autres items

Résultat recherché

Supposons une liste d'images :

Lorsque la souris passe au-dessus d'une des images, on désire ombrager les autres :

Méthode

1. On crée les éléments avec couleur de fond foncée
2. Quand la souris passe au-dessus d'un item, trouver ses soeurs avant et après
3. Modifier l'opacité

HTML

<div class="card border-0 bg-dark ">
    <img class="card-img" src="img/EGS_ClosetotheSun.webp" alt="Close to the sun">
</div>

CSS

/* 1-les cartes qui ont une soeur suivante qui a le focus, 
   2-les cartes qui suivent celle qui a le focus*/
.card:has(~ .card:hover),
.card:hover ~ .card  {
    opacity:0.4;
}