• Diapo avec descriptif au survol.

    Même code avec le descriptif qui devient opaque au survol de l'image affichée.

    Pour l'ajout d'autres images, voir page précédente, au code très similaire; de même pour adapter à des images en 800x600px ou à d'autres dimensions.

    Le descriptif 1...

    Le descriptif 2 ...

    Le descriptif 3 ...

    Le descriptif 4 ...

    Le descriptif 5 ...


    <div style="width: 800px; height: 450px; border: 1px solid black; margin: 0px auto; overflow: hidden;">
    <input id="a1" class="bt" type="text" value="1" /><input id="a2" class="bt" type="text" value="2" /><input id="a3" class="bt" type="text" value="3" /><input id="a4" class="bt" type="text" value="4" /><input id="a5" class="bt" type="text" value="5" />
    <div id="cont" style="width: 1700px; height: 450px; transition: all 1s linear;">
    <img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/khxLbOxtePPZ8dFQFqpVtj4nuPQ.jpg" alt="" />
    <p id="d1">Le descriptif 1...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/LJOMgnTGN0djBctuDqCujGr6K44.jpg" alt="" />
    <p id="d2">Le descriptif 2 ...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/PgmmS6a_kJ7ehWYP0c_Vpc3mBBs.jpg" alt="" />
    <p id="d3">Le descriptif 3 ...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/e09RGC-DUIMJv4eAjEhs_hvpsws.jpg" alt="" />
    <p id="d4">Le descriptif 4 ...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/Sy3GE6Rc0FDU4sS1tAEDK0c6BFk.jpg" alt="" />
    <p id="d5">Le descriptif 5 ...</p>
    </div>
    </div>

    <style><!--
    .bt{ position:absolute; z-index:5; width:30px; height:30px; border-radius:50%;text-align:center; font-size:16pt;}
    #a1{transform:translate(750px,10px);}
    #a2{transform:translate(750px,60px);}
    #a3{transform:translate(750px,110px);}
    #a4{transform:translate(750px,160px);}
    #a5{transform:translate(750px,210px);}


    #d1, #d2,#d3, #d4,#d5{float: left; width: 700px; height: 400px; transform: translate(-750px,25px); transition: all 1s linear; background: rgba(0,0,0,0.5); text-align: center; font-size: 14pt; color: white; text-shadow: 1px 1px black; opacity:0;}
    #a1:focus ~ #cont{transform:translate(0px,0px);}
    #a2:focus ~ #cont{transform:translate(0px,-450px);}
    #a3:focus ~ #cont{transform:translate(0px,-900px);}
    #a4:focus ~ #cont{transform:translate(0px,-1350px);}
    #a5:focus ~ #cont{transform:translate(0px,-1800px);}
    #d1:hover,#d2:hover,#d3:hover,#d4:hover,#d5:hover{opacity:1;}
    --></style>