• Résolu Zoom sur images


    Jeudi 24 Novembre 2022 à 22:51
    Alheck69

    Bonjour,

    J'ai mis en css une ligne de code pour créer un zoom inverse sur mes images qui fonctionne bien. Cependant, le zoom s'effectue aussi sur le header et donc l'image en logo. Donc, j'ai testé diverses méthodes pour que cela n'affecte pas l'image positionné au niveau du header. Le logo a été mis dans un module et placé dans au niveau du header. 

    voici la ligne de code qui créer le zoom : 

    img {      -webkit-transitionall 0.2s;      -moz-transitionall 0.2s;      -ms-transitionall 0.2s;      -o-transitionall 0.2s;      transitionall 0.2simg:hover {      transform:scale(0.9)}

    ​j'avais essayé la ligne de code suivante : 

    #module_contenu XXXXXXX img {none;} img:hover {transform:none;} mais ça ne fonctionne pas comme

    je le souhaite...

    Donc je viens chercher parmi les experts une aide charitable ! 

    Merci par avance !

     

    Vendredi 25 Novembre 2022 à 08:51
    Pipiou

    Bonjour Alheck69

    il faut toujours vérifier le sujet (ou les commentaires) qu'on vient de poster : il manque des mots à droite, pas fastoche à lire ! (t'as fait un copié-collé ?)

    J'ai regardé tes blogs (merci de préciser l'adresse du blog !). J'ai notamment vu un zoom inverse sur les images dans la bannière et en bas de l'accueil.

    Et donc ?  

     

    Vendredi 25 Novembre 2022 à 15:09
    stormalo

    @Alheck69

    Effectivement ton texte est tronqué donc peu compréhensible.

    C'est assez fréquent quand on copie-colle en direct des morceaux de codes

    Pour le lire, j'ai du récupéré le texte par un copié-collé dans le bloc notes de windows.

     

    Note déjà que ton code existant pourrait être plus court :
    img {transition: all 0.2s; }
    img:hover {transform:scale(0.9); }

    car ces propriétés de transition n'ont plus à être préfixées depuis presque 10 ans (je ne sais plus ou j'ai lu cela) 
    Edit 19:40 , vérifié sur site canius.com

    Ton code cible toutes les balises img.
    Pour qu'il ne cible que les img qui sont dans le contenu il faut que la sélectionne se fasse que dans le contenu (tes images dans le header sont en fait dans un module de menu, qui est déplacé) par CSS

    /*zoom sur les images au passage de la souris */
    .module_contenu img {transition: all 0.2s; }
    .module_contenu img:hover {transform:scale(0.9); }

    Ça marche en simulation sur mon écran. A vérifier sur blog réel (Blog Pont à Mousson)

     

    En préventif à un prochain commentaire tronqué, lien vers un truc  wink2

    Vendredi 25 Novembre 2022 à 20:14
    Alheck69

    Bonjour, le problème est que le forum ne fonctionné pas bien hier du coup, je n'ai pas réussi à modifier mon texte.

    Pour essayer de faire simple. J'ai mis dans un module le logo du blog : Pont-à-Mousson (eklablog.fr).

    Ensuite je l'ai placé sur le header en haut à gauche.

    Dans un 2eme temps, j'ai voulu faire un effet zoom inverse sur mes photos et j'ai mis la ligne de code dans le CSS qui fonctionne très bien.

    Mon problème est que j'aimerais figer le logo sur le header puisque celui-ci est pris en compte dans le zoom image.

    et encore désolé pour le texte mal écrit plus haut...

    J'espère que je suis plus claire cette fois-ci

    Merci de vos bons conseils. J'ai mis le code de stormalo et ça fonctionne bien merci tout plein !




    Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.