[Tuto] - Zoom image |
Répondre | Page 12> |
Auteur |
Sujet Recherche Options des sujets
|
||
MicroVinc
Moderator Group Depuis le: 21 Août 2012 Pays: Bretagne Status: Inactif Points: 4460 |
Options des messages
Thanks(0)
Envoyé : 10 Oct 2015 à 21:12 |
||
Bonjour, un petit tuto pour un effet sympa... Et surtout sans utiliser un Bloc de code visuel, par conséquent la disposition de vos images seront visuelles et directement dans l'environnement OE. Difficulté : Débutant (qui connait quand même l'environnement du logiciel OE) Intégration : Totale avec l’environnement OE Effet : ETAPE 1 : 2-Choisir votre image ETAPE 2 : Cette étape permet, grâce au CSS3 l'effet zoom lorsque l'on passe la souris dessus. 3-Copier le code ci-dessous et le coller dans le Bloc de code source :
ETAPE 3 : Cette étape permet d'appliquer une class à la balise parent de la balise <img> 3-Copier le code ci-dessous et le coller dans le Bloc de code source :
Voilà pour le petit effet sympa... Edité par MicroVinc - 10 Oct 2015 à 21:14 |
|||
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
||
(sinon toutes les images vont avoir cet effet là (exemple : le logo du site, et àa enlèvera un code JS; à moins que quelque chose m'échappe) à quoi sert l’étape 3 puisqu'elle est réalisée dans l'étape 1 ? Edité par nico38 - 11 Oct 2015 à 01:34 |
|||
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|||
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
||
j'apporte juste une deuxieme solution avec un code JS et des sélecteurs en moins : (les valeurs sont différentes par rapport à Hobby parce que c'est juste un copier coller d'un de mes sites et que je suis fainéant)
1. mettre élément image (donner class perso : "zoom") 2. Mettre Dépassement --> Masquer (au Contenu de l'élément image) 3. copier coller ce code Bloc Source Header/CSS .zoom img { -webkit-transition: ease-out 0.8s; -moz-transition: ease-out 0.8s; -o-transition: ease-out 0.8s; -ms-transition: ease-out 0.8s; transition: ease-out 0.8s; } .zoom img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } valeur modifiables (mettre des points et pas des virgules) : 0.8s : durée du zoom (modifiable ex : 2s, 1.8s...) 1.05 : agrandissement (1.05 = 5% plus grand, 1.5 = 50% plus grand, 2 = 2x plus grand etc...) Edité par nico38 - 11 Oct 2015 à 01:47 |
|||
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|||
MicroVinc
Moderator Group Depuis le: 21 Août 2012 Pays: Bretagne Status: Inactif Points: 4460 |
Options des messages
Thanks(0)
|
||
L'inconvénient de cette méthode est que si l'on applique des effets rotation et d'ombre sur le cadre image le l'ombre ne zoom pas... |
|||
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
||
je sais pas si j'ai bien compris l'histoire de l'ombre et de la rotation mais si c'est ce que je pense, ça marche :
exemple (ombre + rotation + zoom) il suffit d'écrire ".zoom, .zoom img" au lieu de juste ".zoom img" EDIT : exemple de code .zoom, .zoom img { -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } .zoom img:hover { -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } Edité par nico38 - 11 Oct 2015 à 15:01 |
|||
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|||
MicroVinc
Moderator Group Depuis le: 21 Août 2012 Pays: Bretagne Status: Inactif Points: 4460 |
Options des messages
Thanks(0)
|
||
Si on utilise l'ombre dans les propriétés de cadre OE elle reste sur place de la taille d'origine image.
|
|||
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
||
j'ai pas compris le "elle reste sur place de la taille d'origine"
exemple mais j'ai sûrement pas compris l'effet que vous voulez insinuer avec l'ombre mais comme dirait l'autre "c'est pas grave" Edité par nico38 - 11 Oct 2015 à 15:08 |
|||
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
Options des messages
Thanks(0)
|
||
Bravo à tout les deux et merci (en tout cas de ma part)
Encore la possibilité de se prendre pour un PRO (au résultat) avec vos conseils, modèles et tutos. Sur que ça va donner des idées à beaucoup de néophytes sur le forum. Cordialement
|
|||
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
|
|||
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
||
J'imagine, une rotation à 720 degrés en zoomant et en agrandissant la largeur de l'ombre, de quoi étourdir sérieusement!
|
|||
alexdarcy
Senior Member Depuis le: 19 Oct 2015 Pays: France Status: Inactif Points: 453 |
Options des messages
Thanks(0)
|
||
... et ça marche ! Formidable j'ai réussi... Onglet "Exposition"
|
|||
Répondre | Page 12> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |