• Animation sur sujet

    Une question sur les bordures intérieures m'a fait imaginer ce genre d'animation; par contre, elle n'est pas possible avec outline et j'ai donc bricolé avec des cadres, de la couleur de mon fond de page pour escamoter des parties de l'image, au survol d'un bouton.

    Pour simplifier le code, je n'ai pas ajouté de bordure à ce montage.

     

     

     

     

     

     

     


    <div id="bk">
    <p id="bkb"><img src="http://ekladata.com/5vYRXqnn3UosWx7Y0xF1eIgstfw/btrec1.png" alt="" /></p>
    <p id="bka">&nbsp;</p>
    <p id="bkc">&nbsp;</p>
    <p id="bkd">&nbsp;</p>
    <p id="bke">&nbsp;</p>
    <p id="bkf">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #bk{ position:relative; width: 800px; height: 600px; margin: 10px auto;}
    #bkb{position:absolute; z-index:5;transform:translate(760px,10px); transition:all 0.5s linear; opacity:1;}
    #bka{position:absolute;z-index:1; width:800px; height:600px; transition:all 2s linear; transform:translate(0px,0px); background:url(http://ekladata.com/OTpm6vGYwW-OzMlGsmFajIqAjzc.jpg); -webkit-filter:grayscale(1); filter:grayscale(1);}
    #bkc{position:absolute; z-index:2; transition:all 2s linear; transform:translate(0px,0px); width:800px; height:10px; background-color:#d9d9d9;}
    #bkd{position:absolute; z-index:2; transition:all 2s linear; transform:translate(800px,0px); width:0px; height:600px; background-color:#d9d9d9;}
    #bke{position:absolute; z-index:2; transition:all 2s linear; transform:translate(0px,600px); width:800px; height:0px; background-color:#d9d9d9;}
    #bkf{position:absolute; z-index:2; transition:all 2s linear; transform:translate(0px,0px); width:0px; height:600px; background-color:#d9d9d9;}
    #bkb:hover{opacity:0;}
    #bkb:hover ~ #bkc{ width:800px; height:280px; transform:translate(0px,0px);}
    #bkb:hover ~ #bkd{width:350px; transform:translate(450px,0px);}
    #bkb:hover ~ #bke{height:150px; transform:translate(0px,450px);}
    #bkb:hover ~ #bkf{width:220px; transform:translate(0px,0px);}
    #bkb:hover ~ #bka{-webkit-filter:grayscale(0); filter:grayscale(0);}
    --></style>
    ...
    4 cadres, de la couleur de mon fond de page, sont réduits en largeur ou hauteur et s'agrandissent au survol d'un bouton.