Résolu CSS ciblé (zoom) pour certains articles/rubriques

Bonjour ! Vous allez bien ?

Je fais appel aujourd'hui à ceux d'entre vous qui sont plus doués que moi niveau CSS.

J'ai trouvé un code CSS qui faisait ce que je voulais. Et il fonctionne bien.

C'est un code qui zoom un peu les images quand je passe la souris dessus.

Il fonctionne bien. 

Seulement, je voudrais que ça fonctionne pour seulement quelques rubriques et articles ciblés.

Mais je n'ai aucune idée de comment procéder, quoi écrire ni où le mettre dans le code.

Voici le code en question pour le zoom : 

img {     

    -webkit-transition: all 0.2s;      

    -moz-transition: all 0.2s;      

    -ms-transition: all 0.2s;      

    -o-transition: all 0.2s;      

    transition: all 0.2s;

}

img:hover {     

    transform:scale(1.2);

}

J'ai fait des recherches pendant plusieurs heures sans trouver ce que je cherchais.

Donc, si quelqu'un ici pouvait m'aider, je lui en serais très reconnaissante. Je ne suis pas très calée niveau CSS/HTML etc... Je ne cherche pas à faire compliqué, mais un joli effet sur certaines images dans certains articles, certaines rubriques et pas pour la totalité des images du blog.

Je suis désolée si le sujet a déjà été abordé, mais faire une recherche sur le forum s'est avéré assez ardu et je n'ai pas trouvé de résultat.

Voilà. Bonne journée/soirée.

Bonjour MyaEria,

Ce sujet a déjà été abordé sur le forum et voici le lien -> ICI qui devrait répondre à tes attentes.

Bonne lecture et bonnes suites. 

Bonjour, Collete95. Malheureusement, ça ne m'a pas aidé. Les liens et même le lien dans l'autre sujet qui ramène sur un site qui donne des codes CSS ça ne m'a pas aidé.

Ils donnent des codes... mais jamais l'explication sur "comment procéder" et où mettre quoi plus exactement.

Je pense que j'ai compris que le code CSS il faut absolument le mettre dans la feuille de style Eklablog. Ça, ça va. (à moins que je me trompe).

Maintenant, comment je fais pour cibler seulement les articles ou les images des articles qui m'intéressent et sur lesquelles je veux mettre l'effet sans que ça empiète sur TOUTES les images qui sont présentes sur le blog. Voilà le problème.

Faut-il mettre un code HTML dans la code source de l'article ? Sur chaque image ? Ou à un endroit du code de l'article qui va englober toutes les images ?

J'ai compris dans l'autre post qu'on pouvait faire image par image... Mais j'ai pas compris comment et où on met les codes. Même si y'a des codes.

Ou, faut-il mettre des codes supplémentaire dans le CSS pour cibler les articles précis ? Ou une rubrique ?

J'ai essayé plusieurs codes HTML dans le code source, j'ai essayé de les mettre où je pensais que c'était bon, mais ça ne fonctionne pas.

Si je dois faire image par image, je le ferai. ^^ Mais je dois savoir comment très exactement. 

Merci de l'aide que vous m'apporterez. ^^ Je suppose que je suis vraiment pas douée avec les codes. XD

Bonne journée/soirée.

Bonsoir MyaEria

Une petite illustration pour aider à comprendre le principe, en considérant le css "effet zoom" que tu as indiqué.

Pour qu'il n'agisse que sur certaines images, on va donner un nom à cette recette de style, par exemple "monzoom"  On crée donc une class="monzoom"
------------------------------------------------------------------------
Hypothèse n°1
Ton CSS pourrait s'écrire :
.monzoom {     
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;      
    -o-transition: all 0.2s;      
    transition: all 0.2s;
}

.monzoom:hover {     
    transform:scale(1.2);
}

Il s'appliquera à toutes les images auxquelles tu auras affecté la class "monzoom". Comme par exemple :
<img class="monzoom" src="adresse_de_l'image" alt="" />

------------------------------------------------------------------------
Hypothèse n°2
Ton CSS pourrait s'écrire :
.monzoom img {     
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;      
    -o-transition: all 0.2s;      
    transition: all 0.2s;
}

.monzoom img:hover {     
    transform:scale(1.2);
}

Il s'appliquera à toutes les images (img) contenues dans une section de la page que tu auras affectée de la class "monzoom". Comme par exemple :    

<div class="monzoom">

bla  bla bla ..... du texte
Ici image1 <img src="adresse_de_image1" alt="" />  (concernée par l'effet zoom)

encore du bla  bla bla .....
Ici image2 <img src="adresse_de_image2" alt="" /> (concernée par l'effet zoom)

etc.

</div>

du bla bla en plus
Ici image3 <img src="adresse_image3" alt="" /> (pas concernée par l'effet zoom)

ici bla bla de conclusion

Etc.

Ou mettre ce CSS ? Dans une feuille de style

Feuille de style : tout endroit ou le style n'est pas définit dans un élément du code html

Feuille de style externe au document principal,  le thème-css par exemple
Feuille de style interne au document principal, c.a.d. entre des balises <style> et </style> ; mais dans ce dernier cas il ne s'appliquera que s'il est présent en même temps que les images

Wouah !!!! 

Merciiiiiiiiii, stormalo ! Thank You! 

X1.000 000

La seconde méthode fonctionne vraiment bien. Je dois garder ce message quelque part. À force d'écrire ces codes, je saurai les retenir, je pense. ;)

Et un énorme merci également pour cette explication vraiment claire et concise ! Ça m'a aidé. J'ai su bien placer les balises style dans le code source de l'article et les div et ça a fonctionné. J'ai testé sur des articles test sur mon petit blog et je suis arrivée à faire qu'un ait toutes les images qui font le zoom et l'autre il n'y a qu'une image qui fait le zoom. 

Vraiment, un énorme merci !! Tu viens de faire une heureuse, je te le garanti. :)

Mon problème est très résolu !!

Wouahhhh ! *petite danse de la joie*

Si ça peut également aider d'autres personnes, ce sera un +.

Bonne journée !

Bonjour MyaEria, bonjour stormalo ! 

@MyaEria

Désolée de ne pas avoir donné suite à ta réponse car pas derrière mon ordi hier soir, mais stormalo ayant pris le relais, ses explications ont porté ses fruits et j'en suis ravie pour toi. 

Toutefois, je souhaiterais apporter cette précision, à savoir qu'il est nécessaire placer le css après le html, sinon cela provoque un bug qui engendre des lignes de codes qui s'accumulent à chacune de tes interventions dans l'article.

Par ailleurs, j'ai aussi rectifié ton code, car des préfixes ne sont plus utilisés et 1 autre est manquant.

Tu trouveras tout ça dans le document joint qui reprend les codes de tes 2 articles concernés. Tout ce qui est en rouge est à supprimer et ce qui est en vert est à ajouter.

Bonnes suites et bonne journée à vous 2. 

Bonjour, Colette95.

Merci beaucoup pour tes précisions. C'est toujours très utile. Et je garderai ce document pas loin. ^^

Bonne journée ! :)