Montage.14.8.24

 Nous savons faire apparaître des images par glissement mais on peut aussi le faire par développement.

 

 

 

 

 

 

 

 

 

 

 

 

---

<div style="width:1000px; height:563px; border:6px ridge white; box-shadow:6px 6px 8px black; margin:50px auto; padding:0px; background:url('http://ekladata.com/d0iczpdgp1XBbwjAEYnGefso7sY.jpg'); background-size:cover;">

<p id="cda" class="cd">&nbsp;</p>

<p id="cdb" class="cd">&nbsp;</p>

<p id="cdc" class="cd">&nbsp;</p>

<p id="cdd" class="cd">&nbsp;</p>

<p id="bta" class="bt">&nbsp;</p>

<p id="btb" class="bt">&nbsp;</p>

<p id="btc" class="bt">&nbsp;</p>

<p id="btd" class="bt">&nbsp;</p>

<p id="mga" class="mg">&nbsp;</p>

<p id="mgb" class="mg">&nbsp;</p>

<p id="mgc" class="mg">&nbsp;</p>

<p id="mgd" class="mg">&nbsp;</p>

</div>

<hr style="border:3px double black;"><br>...

<style><!--

.cd{position:absolute; z-index:10; width:50px; height:40px;}

.bt{position:absolute; z-index:1; width:50px; height:40px; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; background:lime;}

#cda,#bta{transform:translate(300px,20px);}

#cdb,#btb{transform:translate(400px,20px);}

#cdc,#btc{transform:translate(500px,20px);}

#cdd,#btd{transform:translate(600px,20px);}

.mg{position:absolute; z-index:5;margin-top:0px; transition:all 1.5s;}

#mga{width:0px; height:563px;  transform:translate(0px,0px); background:url('http://ekladata.com/Fg9xeZnIORZptu-l_k01BoDsex8.jpg'); background-size:1000px 563px; background-position:0px 0px; transform-origin:center left;}

#mgb{width:1000px; height:0px; transform:translate(0px,0px); background:url('http://ekladata.com/s0XaDw9jTDf-wme1ey649ef7PLU.jpg'); background-size:1000px 563px;  background-position:0px 0px; transform-origin:center top;}

#mgc{width:0px; height:563px; transform:translate(1000px,0px); background:url('http://ekladata.com/uef8ekYyVPpO_1Efrjb92lpqrtk.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform-origin:center right;}

#mgd{width:1000px; height:0px; transform:translate(0px,563px); background:url('http://ekladata.com/PskOn77l9xIQqFJ1qb1RXcxBEdI.jpg'); background-size:1000px 563px;  background-position:0px -563px; transform-origin:center bottom;}

#cda:hover ~ #mga,#cdb:hover ~ #mgb,#cdc:hover ~ #mgc,#cdd:hover ~ #mgd{width:1000px; height:563px;background-position:0px 0px; transform:translate(0px,0px);}

--></style>