-
Au survol
J'ai eu la flemme et voici le code publié avec des images en 1000x563px publié avec les mêmes, déformées en 800x600px !
Survolez chaque bouton et patientez pour voir apparaître la couleur.
<div style="width: 800px; height: 600px; margin: 0px auto;">
<p id="cc">Survolez chaque bouton et patientez pour voir apparaître la couleur.</p>
<p id="bt0"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt1"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt2"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt3"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt4"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt5"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt6"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt7"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt8"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="bt9"><img src="http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/boutons063.gif" alt="" /></p>
<p id="fd"> </p>
<p id="m1"> </p>
<p id="m2"> </p>
<p id="m3"> </p>
<p id="m4"> </p>
<p id="m5"> </p>
<p id="m6"> </p>
<p id="m7"> </p>
<p id="m8"> </p>
<p id="m9"> </p>
</div>
<style><!--
#cc{ position:absolute; z-index:1; transform:translate(0px 5px); width:800px; text-align:center; font-size:14pt; color:yellow; text-shadow:1px 1px black;}
#bt0{ position:absolute; z-index:10; transform:translate(750px,10px);}
#bt1{ position:absolute; z-index:10; transform:translate(750px,50px);}
#bt2{ position:absolute; z-index:10; transform:translate(750px,90px);}
#bt3{ position:absolute; z-index:10; transform:translate(750px,130px);}
#bt4{ position:absolute; z-index:10; transform:translate(750px,170px);}
#bt5{ position:absolute; z-index:10; transform:translate(750px,210px);}
#bt6{ position:absolute; z-index:10; transform:translate(750px,250px);}
#bt7{ position:absolute; z-index:10; transform:translate(750px,290px);}
#bt8{ position:absolute; z-index:10; transform:translate(750px,330px);}
#bt9{ position:absolute; z-index:10; transform:translate(750px,370px);}
#fd{ position:absolute; width:800px; height:600px; transform:translate(0px,0px); border:0.2vw ridge grey; background:url('http://ekladata.com/BMoP4jAMhOYXLDAfC2WNnMBfm4Q.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1);transition:transform 1s linear 0s, filter 1s linear 1s;}
#m1{position:absolute; width:800px; height:600px; transform:translate(0px,0px) rotatey(90deg) scale3d(1,1,1) perspective(2000vw); background:url('http://ekladata.com/tPPwDeq6ZeHQqgD-hee8THowfuk.jpg'); background-size:cover;filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 2s;}
#m2{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(1,0,1) perspective(200vh) rotatex(60deg); background:url('http://ekladata.com/aPL8Jj6xH3c12uLFeMlRwiRbUd4.jpg'); background-size:cover;filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 2s; transform-origin:bottom center;}
#m3{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(0,1,1) perspective(200vh) rotatey(60deg); background:url('http://ekladata.com/pYBSZNQqm3lzrLJFXqMr0Ub4bU8.jpg'); background-size:cover;filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 2s; transform-origin:center left;}
#m4{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(1,0,1) perspective(200vh) rotatex(-60deg); background:url('http://ekladata.com/YVW7PGLZzLRdEcqA0UcidkTZ0I4.jpg'); background-size:cover;filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 2s; transform-origin:top center;}
#m5{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(0,1,1) perspective(200vh) rotatey(-60deg); background:url('http://ekladata.com/Ai-5lt2aV1JQpaAmIQQEV_yKHpI.jpg'); background-size:cover;filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 2s; transform-origin:center right;}
#m6{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(0,0,1); background:url('http://ekladata.com/27WBoDs_EW6ny2u3xd0nGfNQ4Hw.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 1.5s; transform-origin:top left;}
#m7{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(0,0,1); background:url('http://ekladata.com/mSjavqJm3IIaj4Ec1RIalEioAXY.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 1.5s; transform-origin:top right;}
#m8{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(0,0,1); background:url('http://ekladata.com/XCFSEB5-VjM3JKLZL9oVaPjZV88.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 1.5s; transform-origin:bottom right;}
#m9{position:absolute; width:800px; height:600px; transform:translate(0px,0px) scale3d(0,0,1); background:url('http://ekladata.com/6N9JMew6MJ1xESCv75Kolfc2Q54.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, filter 1s linear 1.5s; transform-origin:bottom left;}
#bt0:hover ~ #fd{filter:grayscale(0); -webkit-filter:grayscale(0);}
#bt1:hover ~ #m1, #bt2:hover ~ #m2,#bt4:hover ~ #m4{z-index:2;transform:translate(0.2vw,0.3vh) scale3d(1,1,1) perspective(2000vh) rotatex(0deg);filter:grayscale(0); -webkit-filter:grayscale(0);}
#bt3:hover ~ #m3, #bt5:hover ~ #m5{z-index:2;transform:translate(0.2vw,0.3vh) scale3d(1,1,1) perspective(2000vh) rotatey(0deg);filter:grayscale(0); -webkit-filter:grayscale(0);}
#bt6:hover ~ #m6,#bt7:hover ~ #m7,#bt8:hover ~ #m8,#bt9:hover ~ #m9{ z-index:2;transform:translate(0.2vw,0.3vh) scale3d(1,1,1);filter:grayscale(0); -webkit-filter:grayscale(0);}
--></style>
montages par codes HTML/CSS
Créer mon blog