-
Montage 47
Notre fidèle visiteuse Loneci m'a fait une demande sur le code précédent mais je n'ai pas compris ce qu'elle voulait exactement: passer du noir/blanc à la couleur (filter:grayscale) ou modifier les couleurs (filter:hue-rotate) pour revenir à la couleur d'origine; voici donc 2 montages similaires avec un filtre différent.
<div style="position: relative; width: 60vw; height: 33.75vw; border: 0.2vh solid grey; margin: 1vh auto; overflow: hidden;"><input id="cde0" class="cde" type="text" value="0" /><input id="cde1" class="cde" type="text" value="1" /><input id="cde2" class="cde" type="text" value="2" /><input id="cde3" class="cde" type="text" value="3" /><input id="cde4" class="cde" type="text" value="4" /><input id="cde5" class="cde" type="text" value="5" /><input id="cde6" class="cde" type="text" value="6" /><input id="cde7" class="cde" type="text" value="7" /><input id="cde8" class="cde" type="text" value="8" /><input id="cde9" class="cde" type="text" value="9" /><input id="cde10" class="cde" type="text" value="10" />
<p id="expl">Le survol de chaque bouton change l'image, hors 0, et sa couleur.<br />Le clic maintenu sur chaque bouton affiche le commentaire.<br />Le temps de l'animation étant de 2 secondes, laisser ce délai entre chaque survol.</p>
<p id="mtg1" class="mtg"> </p>
<p id="comm1" class="comm"><br /><br />Le commentaire 1.</p>
<p id="comm2" class="comm"><br /><br />Le commentaire 2.</p>
<p id="comm3" class="comm"><br /><br />Le commentaire 3.</p>
<p id="comm4" class="comm"><br /><br />Le commentaire 4.</p>
<p id="comm5" class="comm"><br /><br />Le commentaire 5.</p>
<p id="comm6" class="comm"><br /><br />Le commentaire 6.</p>
<p id="comm7" class="comm"><br /><br />Le commentaire 7.</p>
<p id="comm8" class="comm"><br /><br />Le commentaire 8.</p>
<p id="comm9" class="comm"><br /><br />Le commentaire 9.</p>
<p id="comm10" class="comm"><br /><br />Le commentaire 10.</p>
</div>
<style><!--
.cde{position:absolute; z-index:10; width:4vw; height:2vw; border-radius:1vw; border:0.2vh solid black; background: linear-gradient(to top, #b4ddb4 0%,#FE2E2E 100%);text-align:center; line-height:2vw; font-size:1.5vw; color:lime!important; text-shadow:0.1vh 0.1vh black;}
#cde0{box-sizing:border-box; transform:translate(1vw,31.75vw);}
#cde1{box-sizing:border-box; transform:translate(6vw,31.75vw);}
#cde2{box-sizing:border-box; transform:translate(11vw,31.75vw);}
#cde3{box-sizing:border-box; transform:translate(16vw,31.75vw);}
#cde4{box-sizing:border-box; transform:translate(21vw,31.75vw);}
#cde5{box-sizing:border-box; transform:translate(26vw,31.75vw);}
#cde6{box-sizing:border-box; transform:translate(31vw,31.75vw);}
#cde7{box-sizing:border-box; transform:translate(36vw,31.75vw);}
#cde8{box-sizing:border-box; transform:translate(41vw,31.75vw);}
#cde9{box-sizing:border-box; transform:translate(46vw,31.75vw);}
#cde10{box-sizing:border-box; transform:translate(51vw,31.75vw);}#expl{position:absolute; z-index:1; width:40vw; height:14vw; background:rgba(255,255,255,0.5);text-align:center; font-size:1.5vw; transform:translate(10vw,5vw);}
.mtg{position:absolute; width:60vw; height:33.75vw; filter:hue-rotate(180deg); -webkit-filter:hue-rotate(180deg); transform:translate(0vw,0vw); transition:filter 2s linear;}
#mtg1{ background:url('http://ekladata.com/qFt9IB2avxTykTNUaidFm5GNQy0@1151x648.jpg'); background-size:cover;}
.cde:hover{background: linear-gradient(to bottom, #b4ddb4 0%,#002400 100%);}.comm{position:absolute; z-index:6; width:60vw; height:33.75vw; background:rgba(0,0,0,0.5); text-align:center; font-size:0.8vw; color:white; text-shadow:0.1vh 0.1vh black; transition:all 1s linear;}
#comm1,#comm2,#comm3,#comm4,#comm5,#comm6,#comm7,#comm8,#comm9,#comm10{transform:translate(0vw,-35vw);}#cde0:hover ~ #mtg1{filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); }
#cde1:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/1I992Np24-VqJMgHxUN4MpLuhg0@1151x648.jpg'); background-size:cover;filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); }
#cde2:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/USV9C9749K1txlmWzdEuNJwyi8c@1151x648.jpg'); background-size:cover; filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
#cde3:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/foRWs8sn0S1EeOfdTeo721NKvFM@1151x648.jpg'); background-size:cover;filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); }
#cde4:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/a5yonSiJnuBwr6mAiRM8FpSM8cg@1151x648.jpg'); background-size:cover; filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
#cde5:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/hChwvNZvm-zbwAbeGOUNQyDfsA4@1151x648.jpg'); background-size:cover;filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); }
#cde6:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/pzd1Cgw_8jEK-R93_iWtyNCAPZw@1151x648.jpg'); background-size:cover; filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
#cde7:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/en4BrkFBsQZQkPejWv-VOodWXp4@1151x648.jpg'); background-size:cover;filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); }
#cde8:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/70bgzFFmVsfYiDnIHqheZYmVyEk@1151x648.jpg'); background-size:cover; filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
#cde9:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/iUMSZ-y4Q80ZoH-F9nKk1Nzo404@1151x648.jpg'); background-size:cover;filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); }
#cde10:hover ~ #mtg1{z-index:3; background:url('http://ekladata.com/X0E23KJzrYL9D0G7f3vf0eBI450@1151x648.jpg'); background-size:cover; filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
#cde1:active ~ #comm1,#cde2:active ~ #comm2,#cde3:active ~ #comm3,#cde4:active ~ #comm4,#cde5:active ~ #comm5,#cde6:active ~ #comm6,#cde7:active ~ #comm7,#cde8:active ~ #comm8,#cde9:active ~ #comm9,#cde10:active ~ #comm10{transform:translate(0vw,0vw);}
--></style>
montages par codes HTML/CSS
Créer mon blog