Par tranche repris

J'ai publié un article avec ce montage mais j'ai beaucoup "bricolé" pour arriver à quelque chose qui soit stable dans la zone article et qui s'adapte à différentes largeur d'écrans.

Je fais cette page pour essayer de répondre à mes interrogations. Survolez les tranches.

Une difficulté est d'afficher le montage sur les écrans de création puis de publication: ils sont différents car le montage est écrit en % de la largeur de la page affichée.

J'ai construit ce montage avec différentes solutions, pour arriver à celle proposée: est-ce la bonne façon de faire ?

Les éléments de cet article sont tous indépendants (position:absolute) et il faut tout de même écrire avant et après, tout en ayant un agrandissement correct.

Mes images font 1920x1080px, 16/9.

Le code du montage:

<p>Texte avant...</p>
<div style="width: 80%; margin: 0% 0% 48% 8%;">
<p id="z1">&nbsp;</p>
<p id="z2">&nbsp;</p>
<p id="z3">&nbsp;</p>
<p id="z4">&nbsp;</p>
<p id="z5">&nbsp;</p>
<p id="p1">&nbsp;</p>
<p id="p2">&nbsp;</p>
<p id="p3">&nbsp;</p>
<p id="p4">&nbsp;</p>
<p id="p5">&nbsp;</p>
</div>
<p>Texte après...</p>
<style><!--
#z1{position:absolute; z-index:10; width:10%; height:85vh; margin:0% 0% 10% 0%;}
#z2{position:absolute; z-index:10; width:10%; height:85vh;margin:0% 0% 10% 15%;}
#z3{position:absolute; z-index:10; width:10%; height:85vh;margin:0% 0% 10% 30%;}
#z4{position:absolute; z-index:10; width:10%; height:85vh;margin:0% 0% 10% 45%;}
#z5{position:absolute; z-index:10; width:10%; height:85vh;margin:0% 0% 10% 60%;}
 
#p1{position:absolute; z-index:1; transition:width 1s linear 0s, filter 1s linear 1s, -webkit-filter 1s linear 1s, margin 1s linear 0s; width:10%; height:85vh; background:url('http://ekladata.com/xDIgb5F-T_mgOlUEfVnxWA_wtUM.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); border-radius:5vw; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black; margin:0% 0% 0% 0%;}
#p2{position:absolute; z-index:1; transition:width 1s linear 0s, filter 1s linear 1s, -webkit-filter 1s linear 1s, margin 1s linear 0s; width:10%; height:85vh; background:url('http://ekladata.com/EHhG-7hWcBFRKOBq7heKu-A49mk.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); border-radius:5vw; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black; margin:0% 0% 0% 15%;}
#p3{position:absolute; z-index:1; transition:width 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:10%; height:85vh; background:url('http://ekladata.com/EDOoZQamkE9zPGIaU0MWIkdHlt8.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); border-radius:5vw; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black;margin:0% 0% 0% 30%;}
#p4{position:absolute; z-index:1; transition:width 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:10%; height:85vh; background:url('http://ekladata.com/ftCH4g_dCnxbIZUhwOs5S3IGyDY.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); border-radius:5vw; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black; margin:0% 0% 0% 45%;}
#p5{position:absolute; z-index:1;  transition:width 1s linear 0s, filter 1s linear 1s, -webkit-filter 1s linear 1s, margin 1s linear 0s; width:10%; height:85vh; background:url('http://ekladata.com/HaYjFO-VQcI5biZUgbEPJIFzeMY.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); border-radius:5vw; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black; margin:0% 0% 0% 60%;}

#z1:hover ~ #p1,#z2:hover ~ #p2,#z3:hover ~ #p3,#z4:hover ~ #p4,#z5:hover ~ #p5{z-index:5; width:80%; height:85vh; filter:grayscale(0); -webkit-filter:grayscale(0); margin:0% 0% 0% 0%;}
--></style>

Le montage est placé dans une div, qui reprend la largeur choisie (80%) et avec un espace dessous de la hauteur du montage (48%)  je n'ai pas compris le pourquoi de cette valeur !

Les boutons sont placés (margin) au dessus (z-index:10;) des images et de la même taille que les images réduites:10%/85vh.  Ne me demandez pas pourquoi cette mesure et cette unité; j'ai essayé en % mais sur un plus petit écran, les images débordaient sur le texte; avec vh, non ! ? vh est une unité viewport qui s'adapte à l'écran en hauteur; vw pour la largeur.

Les images sont placées en fond de paragraphe, qu'elles remplissent entièrement, selon leur taille (background:cover); ces paragraphes sont réduits à 10% pour s'agrandir à 80%; un filtre noir et blanc est appliqué; ils sont positionnés les uns à côté des autres par margin.

Au survol d'un bouton fixe, l'image est animée et le filtre noir et blanc annulé.