[RÉGLÉ] Taille du curseur (zoom-in)

[RobertG]

Bonjour,

Je n'ai pas trouvé s'il y a un moyen de définir une taille (plus grande) au curseur, ici zoom-in dans les fiches des produits Hikashop, pour remplacer le curseur "main" au survol des images pouvant être ouvertes en pop-up.
Y a-t-il une astuce ?

Merci de vos conseils !

[woluweb]

mmmh, le curseur c'est "juste" du CSS. Exemple : https://fr.w3docs.com/snippets/css/c...ol-en-css.html

[RobertG]

Le curseur a bien été changé pour "zoom-in", mais il a été trouvé trop petit, et on me demande s'il est possible de le mettre en plus gros.

[woluweb]

ben oui, regarde quelle est la taille dans le CSS et adapte-la

[RobertG]

Ce n'est pas le navigateur qui détermine sa taille ?
Ce que j'ai trouvé dans le forum Hikashop est simplement

.hikashop_product_main_image_subdiv a {
cursor: zoom-in;
}​

[woluweb]

et si tu ajoutes p ex

transform: translate(-50%, -50%) scale(8);​

[RobertG]

Merci, mais pour le moment, rien ne change.

[woluweb]

si juste avec du css on ne peut pas changer la taille d'un curseur standard tel que https://www.w3schools.com/cssref/try...=trycss_cursor, je sais qu'on peut choisir sa propre image comme curseur, auquel cas tu choisis la taille de l'image...

[RobertG]

Merci.
Je pensais en effet à une utilisation d'image après avoir fait divers tests.
Il faudra que j'en cherche une.

[woluweb]

ton image pourrait être un SVG que tu va chercher directement sur https://fontawesome.com/icons p ex

[RobertG]

Merci, je vais essayer de m'y retrouver, mais je dois dire que je ne vois pas comment affecter une telle pseudo-image "FA" au curseur.
Désolé de mon ignorance dans ce secteur.

[Helloo]

Merci, je vais essayer de m'y retrouver, mais je dois dire que je ne vois pas comment affecter une telle pseudo-image "FA" au curseur.
Désolé de mon ignorance dans ce secteur.

@woluweb à déjà tout dit:

https://fr.w3docs.com/tools/code-editor/3063

[RobertG]

Désolé, mais je ne vois pas comment remplacer "cursor:zoom-in;" par <i class="fa-regular fa-magnifying-glass-plus"></i> puisque c'est dans ce que j'ai cité plus haut que ça se passe

.hikashop_product_main_image_subdiv a {
cursor: zoom-in;
}​​

Dans l'exemple de w3docs, c'est une URL d'image, pas une définition comme me le donne fontawesome

 cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;

[Helloo]

Pourquoi ne pas simplement choisir une image d’une loupe et adapter la grandeur souhaitée ?

Bonne Pâques ...

[RobertG]

C'est ce que je cherchais, mais woluweb m'a envoyé sur Fontawesome.