• Positionnement responsive 2

    Pour m'apprendre à maîtriser les positionnements par margin, voici un second montage et son code.

    <div id="resp">
    <p><img id="m0" src="http://ekladata.com/hsbE5wir8jw357ZRnBjLuSfFCbs.jpg" alt="" /></p>
    <p><img id="m1" src="http://ekladata.com/iIzijZ3dWDR-C9gmJXv_-hF9Ar0.jpg" alt="" /></p>
    <p><img id="m2" src="http://ekladata.com/vVqcJ6cMKaBDGLJPDSC250qN25A.jpg" alt="" /></p>
    <p><img id="m3" src="http://ekladata.com/Hkl7AsUYqCmasnRaY31ydVjKPDA.jpg" alt="" /></p>
    <p><img id="m4" src="http://ekladata.com/TVTnQxm-UKWInU2ZHnk5MEv9aNw.jpg" alt="" /></p>
    </div>

    <style><!--
    @viewport {width: device-width;}
    #resp{width:90%; height: 1050px;}
    #m0{position:absolute; z-index:1; width:95%; height:auto; transform:translate(0px,0px); border:6px ridge grey;}
    #m1{position:absolute; z-index:5; width:12%; height:auto; border-radius:50%; border:4px solid white; box-shadow:4px 4px 8px black; margin:5% 0% 0% 10%; transition:all 1s linear;}
    #m2{position:absolute; z-index:5; width:12%; height:auto; border-radius:50%; border:4px solid white; box-shadow:4px 4px 8px black; margin:5% 0% 0% 30%; transition:all 1s linear;}
    #m3{position:absolute; z-index:5; width:12%; height:auto; border-radius:50%; border:4px solid white; box-shadow:4px 4px 8px black; margin:5% 0% 0% 50%; transition:all 1s linear;}
    #m4{position:absolute; z-index:5; width:12%; height:auto; border-radius:50%; border:4px solid white; box-shadow:4px 4px 8px black; margin:5% 0% 0% 70%; transition:all 1s linear;}
    #m1:hover, #m2:hover, #m3:hover, #m4:hover{z-index:10; width:95%; height:auto; border-radius:0%; transform:translate(0px,0px); border:6px ridge grey; box-shadow:none; margin:0% 0% 0% 0%;}
    --></style>