12 nov 25

Montage en 1200px par 675px, avec une image horizontale et deux verticales.

<div style="width:1200px; height:675px; margin:50px 0 50px -20px;">

<p id="sv">&nbsp;</p>

<p id="cde">SURVOL</p>

<p id="fd">&nbsp;</p>

<p id="enc1">&nbsp;</p>

<p id="enc2">&nbsp;</p>

</div>

<style><!--

#sv{position:absolute; z-index:5; width:1200px; height:675px;}

#cde{position:absolute; z-index:3; width:160px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(520px,50px);}

#fd{position:absolute; z-index:1; box-sizing:border-box; width:1200px; height:675px; border:6px ridge grey; background:url('https://i.goopics.net/myckpc.jpg'); background-size:cover; transition:all 1s;}

#enc1{position:absolute; z-index:1; box-sizing:border-box; width:380px; height:675px; box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px white; border:2px ridge black; border-radius:50%; background:url('https://i.goopics.net/7tkz2v.jpg');transform:translate(100px,0px) rotatey(90deg);transition:all 1s;}

#enc2{position:absolute; z-index:1; box-sizing:border-box; width:380px; height:675px;  box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px white; border:2px ridge black; border-radius:50%; background:url('https://i.goopics.net/hrv3mk.jpg');transform:translate(720px,0px) rotatey(90deg);transition:all 1s;}

#sv:hover~#fd{filter:grayscale(1); filter:opacity(0.5);}

#sv:hover~#enc1{transform:translate(100px,0px) rotatey(0deg);}

#sv:hover~#enc2{transform:translate(720px,0px) rotatey(0deg);}

--></style>

 

SURVOL