28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comportement au passage de la souris

Bonjour,
J'utilise un site web sous spip , design html5up.
Sur le site de démo
https://html5up.net/phantom
Les images sont barrées par un croix en diagonale
Au passage de la souris, il y a un effet de zoom et la croix disparait.
J'ai bien trouvé l'effet zoom dans la css, mais je n'arrive pas à trouver disparition de la croix.
Quelqu'un aurait une idée ?
Bonne journée,
Y
Bonsoir,

C'est une image SVG placée sur un pseudo élément. On la trouve à partir de ce sélecteur :
.tiles article > .image:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 0.25px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='100' y2='100' /%3E%3Cline x1='100' y1='0' x2='0' y2='100' /%3E%3C/svg%3E");
}

Modifié par Olivier C (21 Sep 2023 - 21:04)
Meilleure solution
Bonjour,
Merci du coup de main.
J'ai bien joué avec l'inspecteur, mais jamais je n'aurais pensé que ça vienne d'un background-image.
Bonne journée !
Y
Prévenir un modérateur
Répondre au sujet
Aller à