Agrandir et réduire une image au passage de la souris

Résolu
claztum Messages postés 552 Date d'inscription   Statut Membre Dernière intervention   -  
Plamen13 Messages postés 4 Statut Membre -

Bonjour,

j'ai une image sur ma page web que je voudrais agrandir et réduire lorsque

je passe la souris.

D'avance merci

Windows / Opera 95.0.0.0

6 réponses

  2.
    claztum Messages postés 552 Date d'inscription   Statut Membre Dernière intervention   35
     

    Bjr T3chNOg3n

    Merci pour tes réponses, c'est la solution n°2 qui me convient le mieux,

    seulement il faudrait que le carré vert ==> soit en image? est-ce possible?

    petite image:90x70

    grande image: 600x400

    Merci pour ta réponse.

    0
    1. T3chN0g3n Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1 217
       

      Tu ajoute ça dans ton CSS

      .zoom {
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

      Et ensuite sur t'a page il suffit de mettre ton image dans une div ayant la classe "zoom"

      <div class="zoom"> <img src="image/toto.jpg" width="200"
  height="200" /> /></div>

      Ce n'est qu'un code "type" à adapter. Tu peut bien sur ajuster la taille de tes images

      Cdlt.

      0
  3. claztum Messages postés 552 Date d'inscription   Statut Membre Dernière intervention   35
     

    Re

    ça ne fonctionne pas, il n'affiche pas la 1ere partie

    il affiche uniquement l'image ci-dessous

    <div class="zoom"> <img src="image/toto.jpg" width="200"
  height="200" /> /></div>
    0
    1. T3chN0g3n Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1 217
       

      Qu'entend tu par 1ere partie ? Le CSS ?

      Serait-il possible de partager t'on code, ou d'avoir un lien vers t'on site avec une des images concerné ? Ca serait plus facile de t'aider ...

      0
  4. claztum Messages postés 552 Date d'inscription   Statut Membre Dernière intervention   35
     

    Je crois que j'ai oublié de mettre des balises?

    Je vais faire ça tranquillement, et je te recontacterais une fois terminé.

    A plus.

    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. claztum Messages postés 552 Date d'inscription   Statut Membre Dernière intervention   35
     

        Merci T3chN0g3n,

    J'ai réussi a faire mon animation, encore merci de ton aide, et

    peut-être a une prochaine fois? 

    Salut.

    0
  7. Plamen13 Messages postés 4 Statut Membre
     

    Il faut utiliser par exemple

    transform: scale(1.2);

    dans la règle du passage de la souris au dessus de ton conteneur que tu veux agrandir.

    0

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses