pourquoipas732: Tetris

6 + 1 images en 1200px par 675px

<input id="desc" type="text" value="Clic ici puis survol">

<p id="tet1" class="tet"> </p>

<p id="tet2" class="tet"> </p>

<p id="tet3" class="tet"> </p>

<p id="tet4" class="tet"> </p>

<p id="tet5" class="tet"> </p>

<p id="tet6" class="tet"> </p>

</div>

<style><!--

#desc{position:absolute; z-index:1; width:330px; height:50px; line-height:50px; background:white; font-size:40px; transform:translate(400px,30px);}

.tet{position:absolute; z-index:1; width:1200px; height:675px; margin-top:0px;}

#tet1{background:url('https://i.goopics.net/c3cui0.jpg'); background-size:1200px 675px; clip-path:polygon(0% 50%,10% 50%,10% 80%, 20% 80%,20% 100%, 0% 100%);transform:translate(0px,-700px); transition:all 1s 0s;}

#tet2{background:url('https://i.goopics.net/pgfbeu.jpg'); background-size:1200px 675px; clip-path:polygon(10% 50%,20% 50%,20% 65%, 30% 65%,30% 100%, 20% 100%,20% 80%, 10% 80%);transform:translate(0px,-700px); transition:transform 1s 1s, clip-path 1s 0s;}

#tet3{background:url('https://i.goopics.net/y5xnd1.jpg'); background-size:1200px 675px; clip-path:polygon(30% 80%,60% 80%,60% 100%, 30% 100%);transform:translate(0px,-700px); transition:transform 1s 2s, clip-path 1s 0s;}

#tet4{background:url('https://i.goopics.net/d9hn3o.jpg'); background-size:1200px 675px; clip-path:polygon(50% 65%,60% 65%,60% 50%, 70% 50%, 70% 100%,60% 100%,60% 80%, 50% 80%);transform:translate(0px,-700px); transition:transform 1s 3s, clip-path 1s 0s;}

#tet5{background:url('https://i.goopics.net/whxsxk.jpg'); background-size:1200px 675px; clip-path:polygon(70% 80%,80% 80%,80% 100%, 70% 100%);transform:translate(0px,-700px); transition:transform 1s 4s, clip-path 1s 0s;}

#tet6{background:url('https://i.goopics.net/97apct.jpg'); background-size:1200px 675px; clip-path:polygon(80% 80%,90% 80%,90% 50%, 100% 50%,100% 100%,80% 100%);transform:translate(0px,-700px); transition:transform 1s 5s, clip-path 1s 0s;}

#desc:focus~#tet1,#desc:focus~#tet2,#desc:focus~#tet3,#desc:focus~#tet4,#desc:focus~#tet5,#desc:focus~#tet6{transform:translate(0%,0%);}

#tet1:hover{z-index:10;clip-path:polygon(0% 0%, 10% 0%, 100% 0%,100% 80%, 100% 100%, 0% 100%);}

#tet2:hover{z-index:10; clip-path:polygon(0% 0%,100% 0%,100% 65%,100% 65%,100% 100%, 0% 100%,0% 80%, 0% 80%);}

#tet3:hover{z-index:10; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

#tet4:hover{z-index:10; clip-path:polygon(0% 0%, 60% 0%, 100% 0%, 100% 100%,100% 100%,0% 100%, 0% 80%, 0% 80%);}

#tet5:hover{z-index:10; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

#tet6:hover{z-index:10; clip-path:polygon(0% 0%, 90% 0%, 90% 0%, 100% 0%, 100% 100%, 0% 100%);}

--></style>