• Gif sur IMG

    Merci à Christine de m'avoir proposé cette idée d'un code pour positionner une image animée sur une image fixe.

    Deux solutions simples:

    1/Placer l'image fixe en fond de boîte, (à vos dimensions) et dedans, votre image animée, dont vous ajusterez la taille et la position par le code.

    2/ placer les deux images dans une boîte à vos dimensions, la seconde se trouvant, par défaut, au dessus de la première, et d'ajuster taille et position de la même façon.

     

    Dans ce premier exemple, mon image, au rapport 16/9 fait 1000x563px, à modifier selon votre image, est placée en fond de la boîte: id="m1". L'image animée, chargée sur le net fait 245x208px; je l'ai affichée en 250px de haut, pour être en rapport avec mon sujet. Le positionnement est très simple puisqu'on peut jouer sur la position latérale et la verticale, par transform-translate(H,V);

    <div id="m1"><img id="m2" src="http://ekladata.com/mfjw0aXZkX7qSTgDf3JZW78DmO8.gif" alt="" /></div>
    <style><!--
    #m1{position:relative; width:1000px; height:563px; border:8px ridge grey; margin:5px auto; background:url(http://ekladata.com/YXDJKIyN3ctEv_p90OSQrnNc5AU/888.jpg);}
    #m2{position:absolute; transform:translate(630px,200px); height:250px;}
    --></style>

    L'image animée peut être retournée et/ou inclinée, selon le sujet:

    <div id="m1a"><img id="m2a" src="http://ekladata.com/mfjw0aXZkX7qSTgDf3JZW78DmO8.gif" alt="" /></div>
    <style><!--
    #m1a{position:relative; width:1000px; height:563px; border:8px ridge grey; margin:5px auto; background:url(http://ekladata.com/YXDJKIyN3ctEv_p90OSQrnNc5AU/888.jpg);}
    #m2a{position:absolute; transform:translate(30px,240px) rotatex(180deg) rotate(10deg); height:250px;}
    --></style>

    Envisageons que ce soit l'image de fond que vous vouliez retourner; il vous suffit de retourner la boîte et d'ajuster la position de l'image animée en fonction.

    <div id="m1b"><img id="m2b" src="http://ekladata.com/mfjw0aXZkX7qSTgDf3JZW78DmO8.gif" alt="" /></div>
    <style><!--
    #m1b{position:relative; width:1000px; height:563px; border:8px ridge grey; margin:5px auto; background:url(http://ekladata.com/YXDJKIyN3ctEv_p90OSQrnNc5AU/888.jpg); transform:rotatey(180deg);}
    #m2b{position:absolute; transform:translate(630px,200px) rotatey(0deg) ; height:250px;}
    --></style>

    Et pour illustrer la seconde façon d'écrire le code, en ajoutant une translation sur l'image animée, par une animation CSS... et en format 800x600px !

    <div id="mg1"><img id="mg2" src="http://ekladata.com/DKcG6wKXlaSf85N0p444KrTtGbE/982.jpg" alt="" /> <img id="mg3" src="http://bestanimations.com/Animals/Birds/Eagles/animated-hawk-eagle-gif.gif" alt="" /></div>
    <style><!--
    #mg1{position:relative; width:800px; height:600px; border:6px ridge grey; overflow:hidden; margin:5px auto;}
    #mg2{position:absolute; z-index:1;}
    #mg3{position:absolute; z-index:5; animation: aigle 12s ease-in 0s infinite normal;}
    @keyframes aigle{
    0%   {transform:translate(-450px,100px) scale(0.1);}
    80%  {transform:translate(800px,-100px) scale(1);}
    100% {transform:translate(800px,-100px) scale(1);} }
    --></style>