-
Montage 41
L'avantage de la commande "Active" est que tant que le clic est enfoncé, l'animation se poursuit sans être interrompue par le fait que l'élément animé sorte de sous le clic ou qu'un élément vienne au dessus du bouton, et s'arrête dès que le clic est relâché.
Le survol (commande: hover) demande à être toujours au dessus de l'élément animé ce qui interdit toute animation avec translation.
Le clic (commande:focus) fait comme "Active" mais oblige à un second clic pour revenir en position de départ, sans besoin de maintenir le clic enfoncé.
Le nombre d'images, qui détermine le nombre de boutons, est à votre convenance.
Les images sont redimensionnées dans le code par @1151x648 soit 1151px de large et 648px de haut, ratio 16/9.
J'ai ajouté un filtre couleur actif au départ et qui s'annule à la fin de l'animation; clic maintenu sur chaque bouton.
A
B
C
D
E
F
G
H
I
J
<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; background: url('http://ekladata.com/jM1NjW16L8pohtnoX_tFMygkeLI@1151x648.jpg'); background-size: cover; margin: 1vh auto;">
<p id="anim1" class="anim">A</p>
<p id="anim2" class="anim">B</p>
<p id="anim3" class="anim">C</p>
<p id="anim4" class="anim">D</p>
<p id="anim5" class="anim">E</p>
<p id="anim6" class="anim">F</p>
<p id="anim7" class="anim">G</p>
<p id="anim8" class="anim">H</p>
<p id="anim9" class="anim">I</p>
<p id="anim10" class="anim">J</p>
<p id="image1" class="image"> </p>
<p id="image2" class="image"> </p>
<p id="image3" class="image"> </p>
<p id="image4" class="image"> </p>
<p id="image5" class="image"> </p>
<p id="image6" class="image"> </p>
<p id="image7" class="image"> </p>
<p id="image8" class="image"> </p>
<p id="image9" class="image"> </p>
<p id="image10" class="image"> </p>
</div>
<style><!--
.anim{position:absolute; z-index:5; width:6vw; height:2vw; background: linear-gradient(to bottom, #0431B4 0%,#81DAF5 100%); border:0.4vh solid white;text-align:center; line-height:2vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
#anim1{box-sizing:border-box; transform:translate(0vw,31.75vw);}
#anim2{box-sizing:border-box; transform:translate(6vw,31.75vw);}
#anim3{box-sizing:border-box; transform:translate(12vw,31.75vw);}
#anim4{box-sizing:border-box; transform:translate(18vw,31.75vw);}
#anim5{box-sizing:border-box; transform:translate(24vw,31.75vw);}
#anim6{box-sizing:border-box; transform:translate(30vw,31.75vw);}
#anim7{box-sizing:border-box; transform:translate(36vw,31.75vw);}
#anim8{box-sizing:border-box; transform:translate(42vw,31.75vw);}
#anim9{box-sizing:border-box; transform:translate(48vw,31.75vw);}
#anim10{box-sizing:border-box; transform:translate(54vw,31.75vw);}
.image{position:absolute; z-index:1; width:0vw; height:2vw; transform:translate(0vw,0vw);filter:hue-rotate(270deg); -webkit-filter:hue-rotate(270deg); transition: width 1s linear 0s, background 1s linear 0s, transform 1s linear 0s, height 1s linear 1s, filter 5s linear 2s;}
#image1{background:url('http://ekladata.com/5J02-vQBx_SaZL4RVRb_-CotEgU@1151x648.jpg');}
#image2{background:url('http://ekladata.com/9aOVbah4mYQyyMOnjL8jMUj69Fc@1151x648.jpg');}
#image3{background:url('http://ekladata.com/JZ6wx2xroTaRBegN3Ogb-IyOSgQ@1151x648.jpg');}
#image4{background:url('http://ekladata.com/K2piyqo8eH6ImvYEuO9B4coC_nE@1151x648.jpg');}
#image5{background:url('http://ekladata.com/8SUrDojKGEG0LIpgfuWADzsn_N8@1151x648.jpg');}
#image6{background:url('http://ekladata.com/z0R2ZC3V3HKooD4U2FcZzq0f4WE@1151x648.jpg');}
#image7{background:url('http://ekladata.com/SX6mZLm9sBymHCrCFJ3Desmgr4g@1151x648.jpg');}
#image8{background:url('http://ekladata.com/U_ORdBkHxquGznZt3PTexdoVt0o@1151x648.jpg');}
#image9{background:url('http://ekladata.com/5R7mbN-HDXh9ZyE1JXDIegh3uu0@1151x648.jpg');}
#image10{background:url('http://ekladata.com/RoI8Jzhj6CkgUq3yrvA9zbIDaXk@1151x648.jpg');}#anim1:active ~ #image1,#anim2:active ~ #image2,#anim3:active ~ #image3,#anim4:active ~ #image4,#anim5:active ~ #image5,#anim6:active ~ #image6,#anim7:active ~ #image7,#anim8:active ~ #image8,#anim9:active ~ #image9,#anim10:active ~ #image10{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
--></style>