• Remue ménage 3

     

    J'ai écrit dernièrement qu'en mettant un cadre avec une image de fond en noir et blanc, tout ce que ce cadre contient est en noir et blanc.
    On peut ne rien mettre en image de fond et placer une image en noir et blanc et, par dessus, les vignettes en couleur.
    Survolez le bouton orange.

     

     

     

     

     

     

     

     


    <div id="fda">
    <p id="fd"><img src="http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg" alt="" /></p>
    <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>
    <hr style="border:3px double grey;">
    <p>...</p>
    <style type="text/css"><!--
    #fda{position:relative; width:800px; height:600px; border:4px ridge white; margin:5px auto;}
    #fd{position:absolute; z-index:1; transform:translate(0px,0px); width:800px; height:600px;-webkit-filter:grayscale(1); filter:grayscale(1); opacity:0.2;}
    #tt{position:absolute; z-index:2; 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; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(-160px,500px) scale(0.2);background-position:0% 0%;}
    #selb{position:absolute; transition:all 2s linear 2s;width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(-60px,500px) scale(0.2);background-position:100% 0%;}
    #selc{position:absolute; transition:all 1.5s linear 3.5s; width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(40px,500px) scale(0.2);background-position:0% 33%;}
    #seld{position:absolute; transition:all 1.5s linear 5s; width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(140px,500px) scale(0.2);background-position:100% 33.3%;}
    #sele{position:absolute; transition:all 1s linear 6s; width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(240px,500px) scale(0.2);background-position:0% 66.6%;}
    #self{position:absolute; transition:all 1s linear 7s; width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(340px,500px) scale(0.2);background-position:100% 66.6%;}
    #selg{position:absolute; transition:all 1s linear 8s; width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(440px,500px) scale(0.2);background-position:0% 100%;}
    #selh{position:absolute; transition:all 1s linear 9s; width:400px; height:150px; border:10px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/zFHCZa9NygVxjyuXxEp1nFkRlqQ/3550.jpg'); transform:translate(540px,500px) scale(0.2);background-position:100% 100%;}

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