• faire pivoter une image

    Pour bicar

    animbouncing

    au passage de la souris

    geometric

     

     

    Autre effet: image qui sort de son cadre

    « Image en Fond de blog extensibleTraducteur google »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Lundi 11 Août 2014 à 23:07

    Hello Lezart Bleu !

    Rhooo !!! Comment tu fais ça ????

    2
    Mardi 12 Août 2014 à 13:17

    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 ?

    3
    Mardi 12 Août 2014 à 15:12
    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 ^^
    4
    Mardi 12 Août 2014 à 15:46

    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  ....)

    5
    Mardi 12 Août 2014 à 16:09
    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.
    6
    Mardi 12 Août 2014 à 16:30
    Ah ! ah ! j'avais pas vu le petit boiiiing! boiiiingggg ! que tu as ajouté dans le post ! trop sympa, ça ! j'adore !
    7
    Mardi 12 Août 2014 à 18:30

    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) ?

    8
    Mardi 12 Août 2014 à 19:26
    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.
    9
    Mardi 12 Août 2014 à 20:22

    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

    10
    Mardi 12 Août 2014 à 23:34
    Flûte ! C'est ma faute ?
    11
    Mardi 12 Août 2014 à 23:40
    Non, bien sur !
    tu peux dormir tranquille :)
    bonne nuit
    12
    Mercredi 16 Décembre 2015 à 16:14

    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 !)

    13
    Mercredi 16 Décembre 2015 à 16:49

    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

    14
    Mercredi 16 Décembre 2015 à 19:46

    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)...

    15
    Jeudi 17 Décembre 2015 à 10:44

    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...

    16
    Jeudi 17 Décembre 2015 à 12:35

    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

    17
    Vendredi 18 Décembre 2015 à 13:40

    Bonjour Marc81, 

    c'est un style appliqué aux infos bulles en effet.

    Tu voudrais l'avoir sur quoi exactement ?

    18
    Vendredi 18 Décembre 2015 à 15:29

    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">&nbsp;</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 !

    19
    Vendredi 18 Décembre 2015 à 16:15

    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 ?

    20
    Vendredi 18 Décembre 2015 à 17:55

    Oui, je comprends. J'ai fait une demande d'inscription...

    21
    Samedi 19 Décembre 2015 à 09:48

    Bonjour Marc81

    j'ai fait un petit article pour les images cliquables

    a plus mais ce w-e, je ne serai pas trop dispo sur le net...



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl