• Au boulot

    Une seule adresse d'image en 800x600px à héberger.

     

    Survolez le montage

     

     

     

     

     

    <div id="mg1">
    <p id="mg2">&nbsp;</p>
    <p id="mg9">Survolez le montage</p>
    <p id="mg3" class="mg4">&nbsp;</p>
    <p id="mg5" class="mg4">&nbsp;</p>
    <p id="mg6" class="mg4">&nbsp;</p>
    <p id="mg7" class="mg4">&nbsp;</p>
    <p id="mg8" class="mg4">&nbsp;</p>
    </div>
    <style><!--
    #mg1{position:relative; transition:all 1s linear;width:800px; height:600px; margin:5px auto;}
    #mg2{position:absolute; z-index:10; transition:all 1s linear; width:800px; height:600px; transform:translate(-6px,-6px);}
    .mg4{background:url(http://ekladata.com/ODI5w16tTE3oc1a0DproLR2q1Qw.jpg);}
    #mg3{position:absolute; transition:all 1s linear; width:250px; height:250px; transform:translate(275px,175px); border-radius:50%; border:1px solid black; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background-position:center center;}
    #mg5{position:absolute; transition:all 1s linear;  width:200px; height:60px; transform:translate(50px,80px) rotate(30deg);  border:1px solid black; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background-position:top left;}
    #mg6{position:absolute; transition:all 1s linear;  width:200px; height:60px; transform:translate(50px,450px) rotate(-30deg);  border:1px solid black; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background-position:bottom left;}
    #mg7{position:absolute; transition:all 1s linear;  width:200px; height:60px; transform:translate(530px,80px) rotate(-30deg);  border:1px solid black; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background-position:top right;}
    #mg8{position:absolute; transition:all 1s linear;  width:200px; height:60px; transform:translate(530px,450px) rotate(30deg);  border:1px solid black; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background-position:bottom right;}
    #mg9{position:absolute; transform:translate(200px,10px);width:400px; height:150px; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black;}
    #mg2:hover{border:6px ridge grey;}
    #mg2:hover ~ #mg3{transform:translate(200px,0px); width:400px; height:600px; border-radius:0%; box-shadow:0px 0px 0px; border:0px;}
    #mg2:hover ~ #mg5{transform:translate(0px,0px) rotate(0deg); width:200px; height:300px; box-shadow:0px 0px 0px; border:0px;}
    #mg2:hover ~ #mg6{transform:translate(0px,300px) rotate(0deg); width:200px; height:300px; box-shadow:0px 0px 0px; border:0px;}
    #mg2:hover ~ #mg7{transform:translate(600px,0px) rotate(0deg); width:200px; height:300px; box-shadow:0px 0px 0px; border:0px;}
    #mg2:hover ~ #mg8{transform:translate(600px,300px) rotate(0deg); width:200px; height:300px; box-shadow:0px 0px 0px; border:0px;}
    --></style>