• Diaporama 25

    Même principe pour des images de 450x600px.
    Survol menu et clic sur boutons; retour par clic sur la croix.

    Menu

    X

     

     

     

     

     

     

    ...

    <div id="fd">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a> <a id="lien5" class="ancre"></a> <a id="lien6" class="ancre"></a>
    <p id="mn">Menu</p>
    <p id="mb"><a href="#lien0"><span id="tr0" style="font-size: 20pt; color: yellow; text-shadow: 1px 1px black;">X</span></a><a href="#lien1"><img id="tr1" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien2"><img id="tr2" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien3"><img id="tr3" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien4"><img id="tr4" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien5"><img id="tr5" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien6"><img id="tr6" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> </p>
    <p id="m1">&nbsp;</p>
    <p id="m2">&nbsp;</p>
    <p id="m3">&nbsp;</p>
    <p id="m4">&nbsp;</p>
    <p id="m5">&nbsp;</p>
    <p id="m6">&nbsp;</p>
    </div>
    </div>
    <style><!--
    #fd{position:relative; margin:10px auto; width:450px; height:600px; border:4px solid white; box-shadow:4px 4px 8px black; background:url('http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg'); overflow:hidden;}
    #ancres a.ancre{display: none;}
    #mn{position:absolute;transition:all 1s linear; z-index:10; width:70px; height:30px; text-align:center; font-size:18pt; color:white; text-shadow:1px 1px black; transform:translate(378px,4px); background-color:rgba(128,128,128,0.5);}
    #mb{position:absolute; transition:all 1s linear; width:380px; height:35px; border:1px solid black; background-color:rgba(128,128,128,0.5); transform:translate(455px,0px);}
    #tr1{position:absolute;z-index:10;transform:translate(20px,0px);}
    #tr2{position:absolute;z-index:10;transform:translate(60px,0px);}
    #tr3{position:absolute;z-index:10;transform:translate(100px,0px);}
    #tr4{position:absolute;z-index:10;transform:translate(140px,0px);}
    #tr5{position:absolute;z-index:10;transform:translate(180px,0px);}
    #tr6{position:absolute;z-index:10;transform:translate(220px,0px);}

    #m1{position:absolute; transform:translate(0px,70px) perspective(500px) rotatey(120deg); width:150px; height:200px; border:2px solid white; transition:all 1s linear; background:url('http://ekladata.com/DLtOLTnWIui2rajISUHs1MW3q4g/DSCN6177.jpg'); background-size:cover; box-shadow:-4px 4px 8px black;}
    #m2{position:absolute; transform:translate(150px,70px) perspective(500px) rotatey(120deg); width:150px; height:200px; border:2px solid white; transition:all 1s linear; background:url('http://ekladata.com/sZJstwRHLlKksYCSNFYZWfkc7wY/DSCN6185.jpg'); background-size:cover; box-shadow:-4px 4px 8px black;}
    #m3{position:absolute; transform:translate(300px,70px) perspective(500px) rotatey(120deg); width:150px; height:200px; border:2px solid white; transition:all 1s linear; background:url('http://ekladata.com/2XgD1WK7yNZhWmRCoAz5Plg9s0w/DSCN6189.jpg'); background-size:cover; box-shadow:-4px 4px 8px black;}
    #m4{position:absolute; transform:translate(10px,320px) perspective(500px) rotatey(-120deg); width:150px; height:200px; border:2px solid white; transition:all 1s linear; background:url('http://ekladata.com/WFdusrpZdbqOf0l3_7LIFTETSoA/IMG-3522.jpg'); background-size:cover; box-shadow:-4px 4px 8px black;}
    #m5{position:absolute; transform:translate(160px,320px) perspective(500px) rotatey(-120deg); width:150px; height:200px; border:2px solid white; transition:all 1s linear; background:url('http://ekladata.com/_mPnCLr3wwmzciprxc4xGtTS21E/IMG-3524.jpg'); background-size:cover; box-shadow:-4px 4px 8px black;}
    #m6{position:absolute; transform:translate(310px,320px) perspective(500px) rotatey(-120deg); width:150px; height:200px; border:2px solid white; transition:all 1s linear; background:url('http://ekladata.com/Nr-ywhJdY4yPlW8aNAhsTdqoNEI/IMG-3537.jpg'); background-size:cover; box-shadow:-4px 4px 8px black;}

    #mn:hover ~ #mb{transform:translate(100px,4px); z-index:10;}
    #mb:hover{transform:translate(100px,4px);z-index:10;}
    #ancres a#lien1:target ~ #m1{z-index:2;transform:translate(0px,0px) perspective(5500px) rotatey(0deg); width:450px; height:600px; border:0px; box-shadow:0px 0px;}
    #ancres a#lien2:target ~ #m2{z-index:2;transform:translate(0px,0px) perspective(5500px) rotatey(0deg); width:450px; height:600px; border:0px; box-shadow:0px 0px;}
    #ancres a#lien3:target ~ #m3{z-index:2;transform:translate(0px,0px) perspective(5500px) rotatey(0deg); width:450px; height:600px; border:0px; box-shadow:0px 0px;}
    #ancres a#lien4:target ~ #m4{z-index:2;transform:translate(0px,0px) perspective(5500px) rotatey(0deg); width:450px; height:600px; border:0px; box-shadow:0px 0px;}
    #ancres a#lien5:target ~ #m5{z-index:2;transform:translate(0px,0px) perspective(5500px) rotatey(0deg); width:450px; height:600px; border:0px; box-shadow:0px 0px;}
    #ancres a#lien6:target ~ #m6{z-index:2;transform:translate(0px,0px) perspective(5500px) rotatey(0deg); width:450px; height:600px; border:0px; box-shadow:0px 0px;}

    --></style>