Curseur zoom-in

[Claude VIQUESNEL]

Bonjour

  J'ai mis un   cursor:zoom in !important;  sur mes images pour faire comprendre qu'elles sont "agrandissables". j'ai mis un css à mes images tel que 

.img-blog {
  height: auto !important;
  display: block !important;
  cursor:zoom in !important;
}

Mais ça ne fonctionne pas. Merci de votre aide

[Soraya Lambrechts]

Bonjour,

La valeur de la propriété est zoom-in (avec un tiret)

Référence : https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/cursor

Si la classe img-blog est dans <img>, tu peux renforcer le sélecteur en évitant d'ajouter des !important partout :

img.img-blog {
    display: block;
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}

Best :)

[Claude VIQUESNEL]

Merci Sora... 

 J'ai mis ceci dans le css général

/* Toutes les images du blog reçoivent vos arrondis et ombres de base */
img, .img-blog {
  border: 1px solid #590000;
  box-shadow: 0px 4px 10px rgba(125, 125, 125, 0.5) ;
  border-radius: 15px !important; /* Harmonisé à 15px */
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  cursor:zoom-in;
}
/* ==========================================================================
   2. CONTENEURS & TAILLES D'IMAGES
   ========================================================================== */
.img-container {
  text-align: center !important;
  display: block !important;
  clear: both !important;
  cursor:zoom-in !important;

}
.img-blog {
  height: auto !important;
  display: block !important;

  cursor:zoom-in !important;
}
/* Tailles d'images standards */
.img-large  { width: 800px !important; max-width: 100% !important; margin:auto;cursor:zoom-in !important;}
.img-normal { width: 640px !important; max-width: 100% !important; margin:auto;cursor:zoom+in !important;}
.img-medium { width: 500px !important; max-width: 100% !important; margin:auto;cursor:zoom-in !important;}
.img-middle { width: 400px !important; max-width: 100% !important; margin:auto;cursor:zoom-in !important;}
.img-small  { width: 300px !important; max-width: 100% !important; margin:auto;cursor:zoom-in !important;}
.img-vsmall { width: 150px !important; max-width: 100% !important; margin:auto;cursor:zoom-in !important;}

Mais la loupe n'apparaît pas

[Claude VIQUESNEL]

Oups ...

Bien à toi

[Soraya Lambrechts]

Dans ce que tu as mis, une propriété peut effectivement casser la règle :

.img-normal { width: 640px !important; max-width: 100% !important; margin:auto;cursor:zoom+in !important;}

Tu as mis la valeur "zoom+in" au lieu de "zoom-in".

À ce stade, si ça ne fonctionne toujours pas, il faudra que j'examine le projet de plus près. :)

[Claude VIQUESNEL]

Oups, effectivement mais ça ne change rien, j'ai essayé en mettant ça dans le css d'un article sans succès, peut-être y a t'il conflit avec une autre règle du css général ???

Merci pour l'intérêt que tu portes à mon souci

Bien à toi

[Soraya Lambrechts]

J'ai plusieurs hypothèses, mais sans inspecter le blog, je ne peux pas affirmer la cause exacte.

La propriété initiale peut éventuellement être écrasée par une autre valeur se trouvant dans une déclaration prioritaire.

ça peut également provenir de la structure html. Par exemple un bloc superposé en absolu sur l'image.

Si tu sais me communiquer l'url, je serais en mesure de te dire où se situe le problème.

[Claude VIQUESNEL]

Bonjour Sora 

 Merci voici le code d'un article, je peux t'envoyer le code général du Blog mais je ne sais pas comment faire !

Code d'un article = https://docs.google.com/document/d/1HOGJMHCwPsUf6yYAfIPPJfv4B_kFig9wPbgXDBSf2jk/edit?usp=sharing

URL du Blog = https://www.lerandonneurerrant.fr/

Bien à toi

[Forum Blogger Ambassade Francophone]

Le plus simple est de réécrire un sélecteur dédié. Si j'ai bien compris l'idée, c'est appliquer une loupe uniquement sur les images cliquables.

Parmi les propositions ci-dessous, tu en ajoute qu'une seule à la fin de ton css. Théoriquement, elles doivent toutes fonctionner.

Cibler toutes les images qui ont un lien en parent.
a > img {
  cursor: zoom-in;
}

Cibler toutes les images qui ont un lien survolé en parent.
a:hover > img {
  cursor: zoom-in;
}

Cibler toutes les images survolées qui ont un lien en parent.
a > img:hover {
  cursor: zoom-in;
}



La même série, en ciblant directement dans l'article.

.post-body a > img {
  cursor: zoom-in;
}

.post-body a:hover {
  cursor: zoom-in;
}

.post-body a > img:hover {
  cursor: zoom-in;
}

[Claude VIQUESNEL]

Merci, j'ai essayé mais ça ne fonctionne pas non plus

Bien àt oi

[Claude VIQUESNEL]

Re bonjour, bon finalement j'ai laissé tomber, de toute façon en passant le curseur sur une image il passe en pointer signe qu'il y a un lien donc si le lecteur clique ça agrandira la photo. Merci de votre parience et de votre bonne volonté

Bien à vous