• Exemple 153

    Survol.

    1 image à dimensionner selon vos besoins.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left;">

    <img id="pb1" src="http://ekladata.com/4Oi_b7scSiuBA7vt75KGzV1RPkQ.jpg" alt="" />

    <img id="pb2" src="http://ekladata.com/4Oi_b7scSiuBA7vt75KGzV1RPkQ.jpg" alt="" /></div>

    <style><!--
    #pb1{position:absolute; z-index:1; width:60vw; height:33.75vw; filter:grayscale(1); opacity:0.7;}
    #pb2{position:absolute; z-index:1; width:60vw; height:33.75vw; opacity:0; transition:all 1s linear;}
    #pb2:hover{opacity:1;}
    --></style>


    Une autre écriture possible et en pixel est:

    <div style="width: 800px; height: 450px; margin: 1vh auto; border: 0.1vh solid black; text-align: left;">
    <p id="plb1" class="plb">&nbsp;</p>
    <p id="plb2" class="plb">&nbsp;</p>
    </div>
    <style><!--
    .plb{position:absolute; width:800px; height:450px;background:url('http://ekladata.com/4Oi_b7scSiuBA7vt75KGzV1RPkQ.jpg'); background-size:cover;}
    #plb1{filter:grayscale(1); opacity:0.7;}
    #plb2{opacity:0; transition:all 1s linear;}
    #plb2:hover{opacity:1;}
    --></style>