• Diapo B

     

    Survolez chaque vignette

     

     

     

     

     

     

    Code
    <div id="fd">
    <p id="tex">Survolez chaque vignette</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>

    <style><!--
    #fd{position:relative; margin:10px auto; width:800px; height:600px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN3000.JPG'); border:4px ridge white;}
    #tex{position:absolute; width:200px; height:70px; background-color:rgba(128,128,128,0.8); text-align:center; font-size:20pt; color:lime; text-shadow:1px 1px black; transform:translate(300px,50px);}
    #m1{position:absolute; width:200px; height:100px; transform:translate(-4px,50px); border:2px solid white; box-shadow:3px 3px 6px black; transition:width 1s linear, height 1s linear 1s, transform 1s linear 1s; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN2986.JPG'); background-position:0% 17%; background-size:auto;border-radius:0px 40px 40px 0px;}
    #m2{position:absolute; width:400px; height:100px; transform:translate(-4px,200px); border:2px solid white; box-shadow:3px 3px 6px black; transition:width 1s linear, height 1s linear 1s, transform 1s linear 1s; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN2998.JPG'); background-position:0% 42%; background-size:auto;border-radius:0px 40px 40px 0px;}
    #m3{position:absolute; width:300px; height:100px; transform:translate(-4px,370px); border:2px solid white; box-shadow:3px 3px 6px black; transition:width 1s linear, height 1s linear 1s, transform 1s linear 1s; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN3007.JPG'); background-position:0% 80%; background-size:auto;border-radius:0px 40px 40px 0px;}
    #m4{position:absolute; width:100px; height:100px; transform:translate(698px,50px); border:2px solid white; box-shadow:-3px 3px 6px black; transition:all 1s linear; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN3011.JPG'); background-position:0% 80%; background-size:auto;border-radius:40px 0px 0px 40px;}
    #m5{position:absolute; width:300px; height:100px; transform:translate(498px,200px); border:2px solid white; box-shadow:-3px 3px 6px black; transition:all 1s linear; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN3017.JPG'); background-position:0% 80%; background-size:auto;border-radius:40px 0px 0px 40px;}
    #m6{position:absolute; width:400px; height:100px; transform:translate(398px,370px); border:2px solid white; box-shadow:-3px 3px 6px black; transition:all 1s linear; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/31/DSCN3020.JPG'); background-position:0% 80%; background-size:auto;border-radius:40px 0px 0px 40px;}
    #m1:hover{width:800px; height:600px; transform:translate(-4px,-4px); border-radius:0px; z-index:10; box-shadow:0px 0px;}
    #m2:hover{width:800px; height:600px; transform:translate(-4px,-4px); border-radius:0px; z-index:10; box-shadow:0px 0px;}
    #m3:hover{width:800px; height:600px; transform:translate(-4px,-4px); border-radius:0px; z-index:10; box-shadow:0px 0px;}
    #m4:hover{width:800px; height:600px; transform:translate(-2px,-4px); border-radius:0px; z-index:10; box-shadow:0px 0px;}
    #m5:hover{width:800px; height:600px; transform:translate(-2px,-4px); border-radius:0px; z-index:10; box-shadow:0px 0px;}
    #m6:hover{width:800px; height:600px; transform:translate(-2px,-4px); border-radius:0px; z-index:10; box-shadow:0px 0px;}
    --></style>
    ...