Art.01B.5.21

 Une illustration du principe précédent mais le fait de le complèter, le complique ... désolé !

<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 15px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/BGE4pL7Cc6eWCCAnN9K-Uq9muxA.jpg'); background-size: cover;"><input id="hauta" class="flca" type="text" /> <input id="droita" class="flca" type="text" /> <input id="basa" class="flca" type="text" /> <input id="gauchea" class="flca" type="text" />
<p id="drca">Clic</p>
<p id="pgh" class="pg"><span id="mt0">Survol</span><img id="mt1" class="mt" src="http://ekladata.com/bqKsEmhDaSIXhvb1tzZqubjrRiE.jpg" alt="" /><img id="mt2" class="mt" src="http://ekladata.com/ZAZezU-h9acq_sW1kzl04ZHhJsM.jpg" alt="" /></p>
<p id="pgd" class="pg">Les &eacute;tudiants de sa classe de biologie avanc&eacute;e passaient leur examen de mi-session.<br />La derni&egrave;re question &eacute;tait : "Citez sept avantages du lait maternel".<br />La question valait 70 points ou rien du tout.<br />Un &eacute;tudiant, en particulier, a eu du mal &agrave; trouver sept avantages.<br />Il a cependant &eacute;crit :<br />1) C'est une formule parfaite pour l'enfant.<br />2) Il procure une immunit&eacute; contre plusieurs maladies.<br />3) Il est toujours &agrave; la bonne temp&eacute;rature.<br />4) il est peu co&ucirc;teux.<br />5) Il lie l'enfant &agrave; sa m&egrave;re, et vice versa.<br />6) il est toujours disponible en cas de besoin.<br />Et puis l'&eacute;tudiant &eacute;tait coinc&eacute;. Finalement, en d&eacute;sespoir de cause, juste avant que la cloche ne sonne pour indiquer la fin du test, il a &eacute;crit :<br />7) il est pr&eacute;sent&eacute; dans deux tr&egrave;s jolis contenants.<br />Il a obtenu un A++...</p>
<p id="pgb" class="pg"><span id="mt0a">Survol</span><img id="mt3" class="mt" src="http://ekladata.com/fnyJtM41SORKXQmq1dWi5bU8wjg.jpg" alt="" /></p>
<p id="pgg" class="pg"><span id="mt0b">Survol</span><img id="mt4" class="mt" src="http://ekladata.com/XkD8DjzpS3-BXBxVEAh6N8Pnw30.jpg" alt="" /><img id="mt5" class="mt" src="http://ekladata.com/-9966Zmgf8-HE-e9owLH5kkA3Cw.jpg" alt="" /></p>
</div>

<style><!--
.flca{position:absolute; width:30px; height:30px; background:url('http://ekladata.com/GL3f0MSemCcwU-xBewze75ylETQ/rainb2.jpg'); background-size:cover; border:none; clip-path:polygon(0% 0%, 100% 0%, 50% 100%);}
#hauta{transform: rotate(0deg); margin:0 0 0 940px;}
#droita{transform:rotate(90deg); margin:30px 0 0 970px;}
#basa{transform:rotate(180deg); margin:60px 0 0 940px;}
#gauchea{transform:rotate(-90deg); margin:30px 0 0 910px;}
#drca{position:absolute; width:30px; height:30px; margin:30px 0 0 940px; text-align:center; line-height:30px; font-size:12px;}
.pg{position:absolute; z-index:5; width:1000px; height:562px; transition:all 1s;}
#pgh{background:#F3E2A9; transform:translate(0px,-562px);}
#mt0,#mt0a,#mt0b{position:absolute; z-index:1; font-size:30px; color:coral; text-shadow:2px 2px black; transform:translate(40px,15px);}
.mt{position:absolute; z-index:1; width:1000px; height:562px;transition:all 1s;}
#mt1{clip-path:polygon(10% 10%,75% 90%, 75% 90%, 10% 90%);}
#mt2{clip-path:polygon(20% 10%,90% 10%, 90% 90%, 20% 10%);}
#mt1:hover,#mt2:hover,#mt4:hover,#mt5:hover{z-index:5;clip-path:polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);}
#pgd{background:#A9F5F2; transform:translate(1000px,0px); font-size:20px; text-align:center;}
#pgb{transform:translate(0px,562px);}
#mt0a{position:absolute; z-index:2; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(40px,20px);}
#mt3{filter:grayscale(1);}
#mt3:hover{filter:grayscale(0);}
#pgg{background:coral; transform:translate(-1000px,0px);}
#mt0b{color:white;transform:translate(450px,100px);}
#mt4{clip-path:polygon(0% 0%,40% 0%, 40% 100%, 0% 100%);}
#mt5{clip-path:polygon(60% 0%,100% 0%, 100% 100%, 60% 100%);}
#hauta:focus ~ #pgh, #droita:focus ~ #pgd, #basa:focus ~ #pgb, #gauchea:focus ~ #pgg{transform:translate(0px,0px);}
--></style>

Le cadre du montage avec une image de fond.

Les flèches et texte du pavé directionnel.

Les paramètres communs des pages.

La page haute qui contient l'indication "survol" et 2 images avec découpe (clip-path:polygon();)

La page droite qui contient du texte.

La page basse qui contient une image avec passage du noir et blanc à la couleur, au survol.

La page gauche qui contient 2 images qui s'agrandissent au survol.

Les paramètres des images.

Les animations au survol des images.

Les commandes du pavé directionnel.