• Remue ménage 2

    A partir du code précédent et selon un rangement modifié, on peut faire un truc comme ça avec toujours un rangement au survol du bouton orange.

    L'ordre des animations peut être modifé selon vos choix.

     

     

     

     

     

     

     

     

    <div id="fda">
    <p id="tt">votre texte</p>
    <p id="bt"><img src="http://ekladata.com/29DA5H7PhaeUAFqRapmXDGbUp_E/btorg.png" alt="" /></p>
    <p id="sela">&nbsp;</p>
    <p id="selb">&nbsp;</p>
    <p id="selc">&nbsp;</p>
    <p id="seld">&nbsp;</p>
    <p id="sele">&nbsp;</p>
    <p id="self">&nbsp;</p>
    <p id="selg">&nbsp;</p>
    <p id="selh">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #fda{position:relative; width:800px; height:600px; border:4px ridge white; margin:5px auto; background:url('http://ekladata.com/j_AFfOb7D08QnY4CcT_bd1fp4CI/steel3.jpg');}
    #tt{position:absolute; width:600px; text-align:center; font-size:14pt; transform:translate(100px,50px);}
    #bt{position:absolute; z-index:10; transform:translate(750px,20px);}
    #sela{position:absolute; transition:all 2s linear 0s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(0px,450px);background-position:0% 0%;}
    #selb{position:absolute; transition:all 2s linear 2s;width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(50px,450px);background-position:100% 0%;}
    #selc{position:absolute; transition:all 1.5s linear 3.5s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(100px,450px);background-position:0% 33%;}
    #seld{position:absolute; transition:all 1.5s linear 5s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(150px,450px);background-position:100% 33.3%;}
    #sele{position:absolute; transition:all 1s linear 6s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(200px,450px);background-position:0% 66.6%;}
    #self{position:absolute; transition:all 1s linear 7s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(250px,450px);background-position:100% 66.6%;}
    #selg{position:absolute; transition:all 1s linear 8s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(400px,450px);background-position:0% 100%;}
    #selh{position:absolute; transition:all 1s linear 9s; width:400px; height:150px; background:url('http://ekladata.com/QOGPPTWXk4NyzUy0_eNRO4MsciA/3546.jpg'); transform:translate(300px,450px);background-position:100% 100%;}

    #bt:hover ~ #sela{transform:translate(0px,0px); z-index:5;}
    #bt:hover ~ #selb{transform:translate(400px,0px); z-index:5;}
    #bt:hover ~ #selc{transform:translate(0px,150px); z-index:5;}
    #bt:hover ~ #seld{transform:translate(400px,150px); z-index:5;}
    #bt:hover ~ #sele{transform:translate(0px,300px); z-index:5;}
    #bt:hover ~ #self{transform:translate(400px,300px); z-index:5;}
    #bt:hover ~ #selg{transform:translate(0px,450px); z-index:5;}
    #bt:hover ~ #selh{transform:translate(400px,450px); z-index:5;}
    --></style>


    ...
    ...
    ...