-
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>