-
faire pivoter une image
-
Commentaires
Salut Bicar,
tu veux quoi comme effet ?
et tu veux faire ça sur une image en particulier ou sur plusieurs, dans des endroits différents du blog ?
PS: quel est ton navigateur ?
Coucou !
Mhhhhh ... je pense que pour démarrer, je ferais bien cela sur les vignettes de la page d'accueil : " hot posts ", " con posts " etc ...
Et après, peut-être occasionnellement sur certaines images.
Est-ce que je dois avoir absolument le cadre autour de l'image ? Je préfèrerais pas ... :-)
J'utilise chrome, mais je peux me mettre aussi en firefox ou safari.
Merci ^^
Comme les images en question sont toutes dans le mm module, en ajoutant dans le CSS
/*****rotation images menu accueil*****/
#module_contenu_html856266 img:hover{ -ms-transform:rotate(-22deg);
-webkit-transform: rotate(-22deg);
-moz-transform: rotate(-22deg); transform: rotate(-22deg);}
/*****fin code rotation*****/
je pense que cela devrait fonctionner avec firefox ou chrome ( Internet explorer, je ne sais pas)
tu peux changer la valeur de l'angle (le 22 c'est mon exemple, moins pour tourner vers la gauche)Je te demandais ton nav simplement pour savoir si tu voyais bouger le titre de mon blog au passage souris avec firefox car moi, avec FF je ne ne vois pas ( alors qu'avec chrome oui ....)
MERKIiiiii !!!! Ca marche ! ( j'ai mis 180)
Oui, je vois TRES BIEN bouger ton titre au passage de la souris, c'est très chouette aussi.
J'ai une petite question : je n'ai pas trouvé la formule magique pour ajouter une signature automatiquement à la fin de chaque article. Aurais-tu une idée s'il te plait ? Après, c'est promis, j'arrête les questions.Ah ! ah ! j'avais pas vu le petit boiiiing! boiiiingggg ! que tu as ajouté dans le post ! trop sympa, ça ! j'adore !
Bon, bin, ça rend très bien ton 180°
Pour mettre une image en fin d'article, pour l'instant je vois que ça comme solution: en fait, tu mets ton image en fond ( background) de module article
/****signature ds article****/
.article_text {
background: url("ADRESSE DE TON IMAGE") no-repeat right bottom;
}
/****fin signature****/
j'ai mis le lezardbleu animé avec ce code
Sinon: left, center ou right pour positionnement horizontal et top ou bottom pour vertical ..quoi que... en général c'est plutot en bas qu'on signe !Pour mon titreblog, tu as regardé avec firefox ? si oui, quelle version ( chez moi, ça marche pas avec V31) ?
Oups ! je suis une bille ! J'ai fait trop vite, je n'étais pas sur firefox mais sur chrome. Je viens de vérifier avec FF et en effet, il n'y a pas l'animation. Juste le titre deveint lumineux au passage de la souris. Excuse moi pour l'erreur.
A trop vouloir bidouiller, maintenant, ça marche plus du tout :)
c'est mon coup de lune d'hier ou tes têtes à l'envers qui m'ont tout chambouléboulé
Bye
Bonjour.
Vous donnez le code pour faire pivoter une image. Pourriez-vous me préciser celui permettant de pivoter + agrandir l'image (comme dans le 3e effet de votre présentation) ?
D'avance merci de votre aide (et félicitations pour tous vos précieux articles !)
Re-bonjour Marc81,
En fait, il s'agit d'appliquer une transition qui associe une rotation et un agrandissement au survol souris.
Veux-tu cet effet sur une seule image dans un article ou sur des images qui sont des boutons de menu par exemple ( et qui ont un sélecteur spécifique) ?
il vaut mieux que l'on se retrouve sur cet article ci-dessous car le code de cet effet y est...
http://bleulezard.eklablog.com/boutons-menu-qui-surgissent-a108957386
Merci Maximum 34. Je suis allé voir le code. Ça fonctionne bien. Entretemps, j'en ai trouvé un autre avec :hover {background-size: 150% 150%}, qui fonctionne également bien.
J'ai du mal à voir les différences entre les deux méthodes (à part, peut-être, des problèmes de compatibilité avec les différents navigateurs)...
Bonjour Marc81,
définir une transition permet d'avoir des effets plus fluides
( et plus "complexes", rotation + agrandissement + changement de couleur, de mouvement, de trajectoire dans le temps car la variable temps est prise en compte....).Si tu regardes mes boutons menu horizontal haut de blog, je pourrais les faire tourner plus vite ou les faire toruner 3 fois sur eux même et les envoyer disparaitre par la gauche par exemple puis revenir...
D'accord, je comprends mieux.
Encore une question : quand on survole à la souris les boutons de tes menus, on voit apparaître un message (accueil, plan du site, recherche, etc.). Pourrais-tu m'indiquer comment on fait cela (j'ai vu que l'on peut passer par "Afficher la description de l'image lors du survol de la souris" dans l'administration Ekla, mais cela s'applique à toutes les images...). D'avance merci
Bonjour Marc81,
c'est un style appliqué aux infos bulles en effet.
Tu voudrais l'avoir sur quoi exactement ?
En fait, je souhaiterais installer une icône "email" (avec lien vers page contact) et qu'apparaisse l'info bulle pour dire "contactez-nous". Mais j'aimerais également faire la même chose avec l'icône "Facebook" et avoir en info-bulle "Suivez-nous sur Facebook". Problème : dans ce dernier cas, il s'agit d'un lien vers l'extérieur, et je ne suis pas certain que les infos-bulles fonctionnent dans ce cas.
2 autres choses (si je peux encore abuser) :
- je serais intéressé de savoir comment faire les boutons clignotants (à vrai dire, pas la partie clignotante, mais la partie bouton qui change progressivement de couleur au passage de la souris...)
- je reviens sur le sujet "agrandissement d'une image au survol de la souris" : en fait, je souhaite associer un lien à l'image en question, mais je ne sais pas où mettre mon <a href> dans le code suivant :<div id="bk"> </div>
<style><!--
#bk{transition:all 0.5s linear; width:200px; height:192px; background:url('http://ekladata.comxxxxx.png'); background-size:100% 100%; background-position:50% 50%;}
#bk:hover{ -webkit-transform: scale(1.1) ;/* Agrandissement de la photo à l'échelle 1.1 */ -moz-transform: scale(1.1) ;
-o-transform: scale(1.1) ;
transform: scale(1.1); background-position:50% 50%;}
--></style>
D'avance merci de votre aide !
Bon, là, on change de sujet ( de l'article) puis on revient au même..
Ça fait beaucoup de questions à la suite, je m'y perds...
Donc il vaudrait mieux que je t'ouvre une conversation sur un autre de mes blogs
ici: http://bloginscription.ek.la/Si tu es d'accord ?
Ajouter un commentaire
COUCOU ! Si vous voulez vous fabriquer un masque barrière.
-
secouez-moi tourne web police Zoom pipette curseur perso ModuleLiens Diaporama rechercher eklablog tableau animationCSS éditeur article nov 13 code html webFonts nuagetags Étoiles polices de caractères tombe la neige réduire hauteur colonnes menu éditeur tombe les coeurs border-image menu entête Thème postit puces
Voir tous les tags
-
Dernière mise à jour
-
-
glisser avec la souris →
-
Plus joli avec
Créer mon blog 
Hello Lezart Bleu !
Rhooo !!! Comment tu fais ça ????