-
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"> </p>
<p id="plb2" class="plb"> </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>