• Clip 7

    Reprise d'un autre article, publié sur mon autre blog, avec une écriture plus habituelle pour moi: c'était le premier !

    Survolez le rond vert.

    1

    Code:

    <div style="height: 600px; width: 800px; margin: 10px auto;">
    <p id="bt">1</p>
    <p id="cp1"><img src="http://ekladata.com/hv66ZhyboKcktjkB1nwHUiyqxvk/5646.jpg" alt="" /></p>
    <p id="cpa"><img src="http://ekladata.com/fV3W4lHQF7_VozVb5Y9sgEcl7rE/5647.jpg" alt="" /></p>
    <p id="cpb"><img src="http://ekladata.com/fV3W4lHQF7_VozVb5Y9sgEcl7rE/5647.jpg" alt="" /></p>
    <p id="cpc"><img src="http://ekladata.com/fV3W4lHQF7_VozVb5Y9sgEcl7rE/5647.jpg" alt="" /></p>
    <p id="cpd"><img src="http://ekladata.com/fV3W4lHQF7_VozVb5Y9sgEcl7rE/5647.jpg" alt="" /></p>
    </div>

    <style><!--
    #bt{ position:absolute; z-index:5; transform:translate(700px,0px); width:30px; height:30px; border-radius:50%; border:1px solid black; background-color:lime; box-shadow:1px 1px black; font-size:20pt; text-align:center;}
    #cp1{position:absolute; z-index:1; transform: translate(0px,0px); transition:all 1s linear; }
    #cpa{position:absolute; z-index:2; clip: rect(0px, 0px, 800px, 0px);transform:rotatey(0deg) translate(0px,0px); transition:all 1s linear; transform-origin:200px 0px; }
    #cpb{position:absolute; z-index:2; clip: rect(0px, 200px, 800px, 200px);transform:rotatey(0deg) translate(0px,0px); transition:all 1s linear; transform-origin:200px 0px; }
    #cpc{position:absolute; z-index:2; clip: rect(0px, 400px, 800px, 400px);transform:rotatey(0deg) translate(0px,0px); transition:all 1s linear; transform-origin:200px 0px; }
    #cpd{position:absolute; z-index:2; clip: rect(0px, 600px, 800px, 600px);transform:rotatey(0deg) translate(0px,0px); transition:all 1s linear; transform-origin:200px 0px; }
    #bt:hover ~ #cpa{z-index:2; transform:rotatey(0deg) translate(0px,0px); clip: rect(0px, 200px, 800px, 0px);}
    #bt:hover ~ #cpb{z-index:2; transform:rotatey(0deg) translate(0px,0px); clip: rect(0px, 400px, 800px, 200px);}
    #bt:hover ~ #cpc{z-index:2; transform:rotatey(0deg) translate(0px,0px); clip: rect(0px, 600px, 800px, 400px);}
    #bt:hover ~ #cpd{z-index:2; transform:rotatey(0deg) translate(0px,0px); clip: rect(0px, 800px, 800px, 600px);}
    --></style>
    ...
    2 images de 800x600px.