• Images recto verso ou effet fondu passage souris

    UNIQUEMENT en CSS

    • Effet rotatif Axe Vertical au passage de la souris
    ess
    ess

    ---- --

    • Effet fondu

     

     

    • Sinon, avec javascript activé sur le compte eklablog je crois,  la solution: onmouseover, onmouseout

    le fondu est plus raide !

     

    code édité avec l'ancien version V3 TinyMCE, onglet "avancé" de insérer une image

     

    Mon calendrier de l'Avent, l'an passé, était fait de cette manière

    « Image qui tourne en continuanimation CSS machine à écrire ٩◔̯◔۶ »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Vendredi 14 Novembre 2014 à 17:07
    perspective: 1000px;
    et non pas
    perspective: 1000;
    Waow...!!!! Il est tout beau ton bog !!!!
    Edit:
    Je n'ai pas la barre d'outils-icônes pour les commentaires....normal ?????
    2
    Vendredi 14 Novembre 2014 à 19:38

    Soir... C'est gentil (de passer et de me corriger mes fautes !!)
    le tien de bog !!!  (t'as déjà essayé de faire la faute de frappe dans l'adresse d'un eklablog..mettre eklabog  et vu ce que ça donne !!! ? ) est beaucoup plusse beau et avancé. C'est pour cela que je t'ai piqué plein de trucs !!

    ( avec le changement de logo eklablog, j'ai voulu changer le thème qui était bleu/vert mais je trouve que les couleurs du nouveau logo tirent trop vers "lie de vin" et "caca d'oie" et comme je veux conserver les contrastes inversés,  pour mes yeux, c'est pas évident !)

    Pour la barre outils dans l'éditeur comms, ouaip! j'avais constaté, ça marche pas à tous les coups.
    ça vient certainement du code que j'ai ajouté pour supprimer l'icone "insérer des images".
    D'ailleurs si t'as un peu de temps, c'est la code de là: http://bleulezard.eklablog.com/images-dans-les-commentaires-a113078698

    [[j'ai mis ce code sur un autre blog et là-bas, il fonctionne sans supprimer la barre outils !]]

    3
    Vendredi 2 Janvier 2015 à 14:47

    Re bonjour, ^^

    L'effet de l'image 1 est juste super!

    C'est un mélange de c'est html ou juste de css ?

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    4
    Mercredi 15 Avril 2015 à 15:45

    Salut! Est-ce que tu pourrai m'aider pour le code des image en effet fondu, s'il te plait? Merci biggrin

    5
    Mercredi 15 Avril 2015 à 22:31

    Salut, 

    Est-ce pour l'utiliser  une seule fois ? Dans un article ?

    Si c'est plutot ponctuel, tu ne mets pas le CSS dans "ajouter du CSS" mais seulement dans l'article concerné -- entre balise <style > et </style>--

    En gros, il te faut deux images de mêmes dimensions donc
    1-tu insères dans l'article les deux images aux mêmes dimensions

    2- Tu passes coté code source avec le bouton <> de l'éditeur d'article.

    3- tu vas voir le code html des deux images entre balises <img src ........../> donc deux fois <img src.................. />

    4-
    -Devant première balise <img ...... />, tu colles
    <div id="cfondu">

    -Derrière fermeture dernière balise <img ....... />, tu colles
    </div>

    5- Dans la balise de l'image que tu veux en premier, tu ajoutes
    class="top" entre  <img et src ainsi
    <img class="top" src="http://ekla............ />

    Tu dois te retrouver avec quelque chose comme cela (je mets en gras ce qui est ajouté):

    <div id="cfondu"><img src="http://ekladata.com/bleulezard.eklablog.com/perso/1-allemagne%20-2-.jpg" alt="" /> <img class="top" src="http://ekladata.com/bleulezard.eklablog.com/perso/4minimalism%20-2-.jpg" alt="" /></div>

    6- Reste à ajouter le CSS (à la suite du code html si pour un seul article) Règler width et height en fonction dimensions images.

    <style><!--

    #cfondu { /*espace qui contient les images*/
    position:relative;
    width:550px;/*largeur de l'image*/
    height:550px; /*hauteur de l'image*/
    margin:0 auto;
    }

    #cfondu img {
    position:absolute;
    left:0
    border-radius: 20px; /*arrondis des images*/
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    }

    #cfondu img.top:hover {
    opacity:0;
    }

     

     

    6
    Jeudi 16 Avril 2015 à 15:11

    Wouah c'est super classe comme rendu! Je vais essayer de faire un genre de menu avec je pense
    En tous cas je te remercie pour ton aide!

    7
    Jeudi 16 Avril 2015 à 15:27

    Bonjour Loïcia, 

    si c'est pour des boutons de menu, ya plus simple à faire.

    Tu mets une image en fond de bouton ( background sur le sélecteur de l'élément du menu)
    ainsi que la transition...

    et pour le même sélecteur :hover ( survol souris) tu mets une autre image de fond.

    Sur un exemple, je pourrais un peu plus t'aiguiller

    Tu as aussi cet article
    http://bleulezard.eklablog.com/faire-pivoter-une-image-a61827461
    avec des effets sur image au survol souris ( c'est toujours le même principe, on enregistre un effet CSS transition ou animation  pour :hover comme ici pour le titre du blog..)

    A plus

    8
    Jeudi 16 Avril 2015 à 16:47

    Oh d'accord! Je vais essayer dans ce cas là!
    Je te remercie beaucoup! happy



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl