Zoom Progressif d'une image [RESOLU] Bouton_activeZoom Progressif d'une image [RESOLU] Bouton_hoverZoom Progressif d'une image [RESOLU] Fb-hoverZoom Progressif d'une image [RESOLU] Fb-active
C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Sous-forums en retour à la ligne
Zoom Progressif d'une image [RESOLU] EmptyAujourd'hui à 17:03 par loula

» Bouton ''Sélectionner le contenu'', pour les codes
Zoom Progressif d'une image [RESOLU] EmptyMar 10 Sep 2019, 09:09 par Aetherr

» Tableau de partenaires avec effet Zoom
Zoom Progressif d'une image [RESOLU] EmptyVen 30 Aoû 2019, 05:54 par Arshow

» Système d'onglets simple et personnalisable
Zoom Progressif d'une image [RESOLU] EmptyMar 27 Aoû 2019, 03:08 par cosmic dust

» Infobulle avec effets CSS3
Zoom Progressif d'une image [RESOLU] EmptyMer 21 Aoû 2019, 14:48 par oxMeanMachine

» Qui est en ligne ? - Onglets Groupes
Zoom Progressif d'une image [RESOLU] EmptyDim 18 Aoû 2019, 16:14 par kazan

» Qui est en ligne tableau.
Zoom Progressif d'une image [RESOLU] EmptyVen 16 Aoû 2019, 08:09 par Laureline

» Mise en forme du texte italique et souligné
Zoom Progressif d'une image [RESOLU] EmptyJeu 15 Aoû 2019, 19:05 par SAVAGE.GARDEN


Partagez
 

Zoom Progressif d'une image [RESOLU]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Zoom Progressif d'une image [RESOLU] Empty
Bonsoir!

J'utilise ce code qui est très utile, mais je souhaiterai que l'agrandissement soit progressif. Comment puis-je procéder?

http://www.css-actif.com/t7562-agrandir-l-image-au-passage-du-curseur

Merci bien pour votre aide!


Dernière édition par Akya le Sam 01 Déc 2012, 16:28, édité 1 fois
MessageSujet: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] EmptySam 01 Déc 2012, 15:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Chinelle
{ Membre }
{ Membre }

Féminin Messages : 119



Zoom Progressif d'une image [RESOLU] Empty
Bonsoir !

Pour que ton agrandissement se fasse de façon progressive, il faut définir une transition sur ton élément survolé. J'invente par exemple dans le code suivant. Attention à bien mettre pour chaque navigateur une propriété avec son préfixe, question de compatibilité (-webkit-, -moz-, -ms-, -o-)

Code:
img:hover {
-moz-transform: scale(4,4);
  -moz-transition-property: -moz-transform; // nom de la propriété sur laquelle on applique une transition
 -moz- transition-duration:2s; //durée de la transition
}
MessageSujet: Re: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] EmptySam 01 Déc 2012, 15:49
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2853



Zoom Progressif d'une image [RESOLU] Empty
Bonsoir !
Chinelle a presque raison, il faut accompagner la définition CSS de la classe non survolée par les propriétés de transition :
Code:
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;

Hé oui, les propriétés de transition se définissent dans le sélecteur de base, et non dans celui définissant l'apparence au survol Wink

Il faut également fixer l'apparence de l'image de départ si on veut qu'il y ait une transition d'un état à l'autre, donc préciser que l'image à l'état naturel est à échelle 1.

Donc si ceci se fait sur une image :
Code:
img {
   /* image à l'échelle 1 au départ */
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   /* propriétés de transition */
   -moz-transition:all 1s ease;
   -webkit-transition:all 1s ease;
   -o-transition:all 1s ease;
   transition:all 1s ease;
}

img:hover {
   /* Les propriétés de transformation au survol */
}

Tu peux utiliser cet outil si tu as du mal Wink


Zoom Progressif d'une image [RESOLU] Signature_staff
Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] EmptySam 01 Déc 2012, 16:09
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Chinelle
{ Membre }
{ Membre }

Féminin Messages : 119



Zoom Progressif d'une image [RESOLU] Empty
Eh bien je l'ignorais mais après réflexion il est vrai qu'il vaut mieux définir les propriétés transition sur l'élément de base afin qu'elles s'appliquent également par héritage à l'élément survolé (ce qui ne se ferait pas dans le cas contraire), afin d'éviter la redondance de code. Pardon pour la confusion, merci Christa =)
MessageSujet: Re: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] EmptySam 01 Déc 2012, 16:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Zoom Progressif d'une image [RESOLU] Empty
Ah super! Merci bien les filles! Smile C'est top top top!
MessageSujet: Re: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] EmptySam 01 Déc 2012, 16:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.school-of-pub.net/forum.htm
Murtagh
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



Zoom Progressif d'une image [RESOLU] Empty
Le sujet portant l'indication "résolu", je déplace. A bientôt. Zoom Progressif d'une image [RESOLU] 347705


Zoom Progressif d'une image [RESOLU] Signature_staff
MessageSujet: Re: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] EmptyDim 02 Déc 2012, 12:25
Revenir en haut Aller en bas
Contenu sponsorisé




Zoom Progressif d'une image [RESOLU] Empty
MessageSujet: Re: Zoom Progressif d'une image [RESOLU]   Zoom Progressif d'une image [RESOLU] Empty
Revenir en haut Aller en bas
 

Zoom Progressif d'une image [RESOLU]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [Resolu]Poblème d'image dans les titres des sous forums.
» Image cliquable qui "zoom" au survol
» Image "Help" quand je veux mettre un code javascript. (RESOLU)
» Cherche un code de clignotement d'image progressif
» Image de fond décalé (résolu)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit