Masque 2

Une image à colorier, modifiée en masque et placée au dessus d'un paragraphe, dont on modifie l'image de fond au survol de chaque bouton.

<div id="mk0">
<p id="cc">Survolez les boutons.</p>
<p id="bt1">&nbsp;</p>
<p id="bt2">&nbsp;</p>
<p id="mk2">&nbsp;</p>
<p id="mk1">&nbsp;</p>
</div>
<style><!--
#mk0{width:800px; height:600px; margin:5px auto;}
#cc{position:absolute; z-index:20; transform:translate(20px,10px); width:250px; font-size:16pt; color:white; text-shadow:2px 2px black;}
#bt1{position:absolute; z-index:20; transform:translate(750px,10px); width:30px; height:30px; border-radius:50%; background:coral; box-shadow:inset 4px 4px 6px white, inset -4px -4px 6px black;}
#bt2{position:absolute; z-index:20; transform:translate(750px,50px); width:30px; height:30px; border-radius:50%; background:lime;box-shadow:inset 4px 4px 6px white, inset -4px -4px 6px black;}
#mk2{position:absolute; z-index:1; transition:all 1s linear; width:800px; height:600px; background:url('https://ekladata.com/am1OmW6NK3KOVqbsOKQCmwENxZo.jpg');}
#mk1{position:absolute; z-index:10; width:800px; height:600px; background:url('https://ekladata.com/_4Ei-zSiarCf2oDG_VudHwR8Ask.png');}
#bt1:hover ~ #mk2{ background:url('https://ekladata.com/OC0K1PJsUgoFYXkyrKuh1Ik7INE.jpg');}
#bt2:hover ~ #mk2{ background:url('https://ekladata.com/fawcu-7RR9UpkoDW4mKu84BM4oQ.jpg');}
--></style>