• Paravent

    Pour ce montage, j'ai créé le masque du paravent, des boutons invisibles vides et 5 images en 800x600px.

    Survolez chaque panneau du paravent.

     

     

     

     

     

     


    Code.

    <div id="fd">&nbsp;
    <p id="bt1" style="text-align: center;">&nbsp;</p>
    <p id="bt2" style="text-align: center;">&nbsp;</p>
    <p id="bt3" style="text-align: center;">&nbsp;</p>
    <p id="bt4" style="text-align: center;">&nbsp;</p>
    <p id="f1" style="text-align: center;"><img src="http://ekladata.com/9mKouqDA9kNfHBIknHm4NibmXn0/5800.jpg" alt="" /></p>
    <p id="f2" style="text-align: center;"><img src="http://ekladata.com/-n1O-cUOqvOsJId-rX7y9UhDlFQ/5801.jpg" alt="" /></p>
    <p id="f3" style="text-align: center;"><img src="http://ekladata.com/Fym6JJFqGWiobmqmfL1yjZJx3IA/5802.jpg" alt="" /></p>
    <p id="f4" style="text-align: center;"><img src="http://ekladata.com/GHmDlrNVWr1phA1c0qxvZ-yuFDo/5803.jpg" alt="" /></p>
    <p id="f5" style="text-align: center;"><img src="http://ekladata.com/-ZOipgfiUXqpPjTQhdAX91-p8Vo/5804.jpg" alt="" /></p>
    <p id="mq" style="text-align: center;"><img src="http://ekladata.com/oGTY1poo2qYG5mU0n7imC6AdHdk/st1.png" alt="" /></p>
    </div>
    <style type="text/css"><!--
    #fd{position:relative; width:800px; height:600px; margin:10px auto;}
    #bt1{position:absolute; z-index:20; transform:translate(25px,50px); width:150px; height:500px;}
    #bt2{position:absolute; z-index:20; transform:translate(225px,50px); width:150px; height:430px;}
    #bt3{position:absolute; z-index:20; transform:translate(425px,50px); width:150px; height:430px;}
    #bt4{position:absolute; z-index:20; transform:translate(625px,55px); width:150px; height:500px;}
    #f1{position:absolute; z-index:1; transform:translate(0px,0px);}
    #f2{transition:all 1s linear; position:absolute; z-index:2; transform:translate(0px,0px); opacity:0;}
    #f3{transition:all 1s linear; position:absolute; z-index:2; transform:translate(0px,0px); opacity:0;}
    #f4{transition:all 1s linear; position:absolute; z-index:2; transform:translate(0px,0px); opacity:0;}
    #f5{transition:all 1s linear; position:absolute; z-index:2; transform:translate(0px,0px); opacity:0;}
    #mq{position:absolute; z-index:10;}
    #bt1:hover ~ #f2{opacity:1;}
    #bt2:hover ~ #f3{opacity:1;}
    #bt3:hover ~ #f4{opacity:1;}
    #bt4:hover ~ #f5{opacity:1;}
    --></style>