Loneci.3/8/16

Remplacez mes 5 adresses d'image, en gras/bleu par les vôtres.

<div id="mtg">
<p id="bt">+</p>
<p id="tt">Survolez chaque vignette.<br />Survolez + pour afficher image de fond.</p>
<p id="bt2" class="b">&nbsp;</p>
<p id="bt3" class="b">&nbsp;</p>
<p id="bt4" class="b">&nbsp;</p>
<p id="bt5" class="b">&nbsp;</p>
<p id="mtg1">&nbsp;</p>
<p id="mtg2">&nbsp;</p>
<p id="mtg3">&nbsp;</p>
<p id="mtg4">&nbsp;</p>
<p id="mtg5">&nbsp;</p>
</div>
<style><!--
#mtg{width:800px; height:600px; border:4px ridge grey; margin:10px auto;}
#bt{position:absolute; z-index:10; width:30px; height:30px; font-size:25pt; color:white; text-shadow:2px 2px black; background:lime; text-align:center; transform:translate(750px,10px); line-height:30px;}
.b{width:160px; height:120px;}
#tt{position:absolute; z-index:5; width:570px; font-size:20pt; color:white; text-shadow:2px 2px black; text-align:center; transform:translate(110px,20px); background:rgba(128,128,128,0.5);}

#mtg1{position:absolute; z-index:1; transition:all 0.5s linear; width:800px; height:600px; background:url('http://ekladata.com/nPJ-AKgQgyk3n1i5tQ4sixUKkcE.jpg'); transform:translate(0px,0px);}
#bt2{position:absolute; z-index:10;transform:translate(100px,180px);}
#mtg2{position:absolute; z-index:5; transition:all 1s linear; width:160px; height:120px;border:4px solid white; box-shadow:-3px 3px 5px black; border-radius:60px; background:url('http://ekladata.com/lrNPZiTXAjJQJciJ6_o5jmNBwpo.jpg'); background-size:cover; transform:translate(100px,180px) rotatey(-180deg);}
#bt3{position:absolute; z-index:10;transform:translate(130px,400px);}
#mtg3{position:absolute; z-index:5; transition:all 1s linear; width:160px; height:120px;border:4px solid white; box-shadow:-3px 3px 5px black; border-radius:60px;background:url('http://ekladata.com/XECRStaFizmbLTpe5osQVKX0QHI.jpg'); background-size:cover; transform:translate(130px,400px) rotatey(-180deg);}
#bt4{position:absolute; z-index:10;transform:translate(520px,180px);}
#mtg4{position:absolute; z-index:5; transition:all 1s linear; width:160px; height:120px;border:4px solid white; box-shadow:-3px 3px 5px black; border-radius:60px;background:url('http://ekladata.com/gzkKpvRnyWuL4nbZAGQY9RouDl8.jpg'); background-size:cover; transform:translate(520px,180px) rotatey(-180deg);}
#bt5{position:absolute; z-index:10;transform:translate(520px,400px);}
#mtg5{position:absolute; z-index:5; transition:all 1s linear; width:160px; height:120px;border:4px solid white; box-shadow:-3px 3px 5px black; border-radius:60px;background:url('http://ekladata.com/GdcXFGdtCOYEvjTaCwWqL3hxpEM.jpg'); background-size:cover; transform:translate(490px,400px) rotatey(-180deg);}

#bt:hover ~ #mtg1{z-index:8;}
#bt2:hover ~ #mtg2, #bt3:hover ~ #mtg3, #bt4:hover ~ #mtg4, #bt5:hover ~ #mtg5{ z-index:8; width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg); border:none; box-shadow:none; border-radius:0px;}
--></style>