Montage pour 8 images en 732x549px, ratio 4/3 avec animation au survol de chaque bouton.
J'ai utilisé des "input", élément qui peut être survolé ou cliqué afin de pouvoir modifier ce montage au survol ou au clic sur chaque bouton.
Dans ce dernier cas, il vous faut modifier la dernière ligne du code en remplaçant les hover par focus:
#var1:focus~#jar2,#var2:focus~#jar3,#var3:focus~#jar4,#var4:focus~#jar5,#var5:focus~#jar6,#var6:focus~#jar7,#var7:focus~#jar8{display:block;}
Sans oublier de modifier #var0 de Survol à Clic
...et pi c'est tout !
<div style="width:732px; height:549px; margin:50px auto;">
<input id="var1" class="var" type="button">
<input id="var2" class="var" type="button">
<input id="var3" class="var" type="button">
<input id="var4" class="var" type="button">
<input id="var5" class="var" type="button">
<input id="var6" class="var" type="button">
<input id="var7" class="var" type="button">
<p id="var0">SURVOL</p>
<img id="jar1" class="jar" src="https://i.goopics.net/y8is7b.jpg">
<img id="jar2" class="jar" src="https://i.goopics.net/d1u4ea.jpg">
<img id="jar3" class="jar" src="https://i.goopics.net/i6ih4l.jpg">
<img id="jar4" class="jar" src="https://i.goopics.net/16chbv.jpg">
<img id="jar5" class="jar" src="https://i.goopics.net/0oida8.jpg">
<img id="jar6" class="jar" src="https://i.goopics.net/s9xkn2.jpg">
<img id="jar7" class="jar" src="https://i.goopics.net/q5fuzg.jpg">
<img id="jar8" class="jar" src="https://i.goopics.net/hnlmtd.jpg">
</div>
<style><!--
.var{position:absolute; width:30px;}
#var1{transform:translate(200px,570px);}
#var2{transform:translate(250px,570px);}
#var3{transform:translate(300px,570px);}
#var4{transform:translate(350px,570px);}
#var5{transform:translate(400px,570px);}
#var6{transform:translate(450px,570px);}
#var7{transform:translate(500px,570px);}
#var0{position:absolute; width:120px; font-size:20px; transform:translate(30px,550px);}
.jar{position:absolute; width:732px; height:549px; display:none;}
#jar1{display:block;}
#var1:hover~#jar2,#var2:hover~#jar3,#var3:hover~#jar4,#var4:hover~#jar5,#var5:hover~#jar6,#var6:hover~#jar7,#var7:hover~#jar8{display:block;}
--></style>
SURVOL
super merci Gilbert je vais le faire et je te dirais , bonne semaine
RépondreSupprimer