En barres.

Version en moins large, d'un de mes articles, écrit non pas en % mais en vw et vh; 50vw=50%; je reviendrai sur ces unités. Survolez ces barres.

Je ne sais pas si ces unités sont plus simples à utiliser que les % ; acceptés en taille et en positionnement, je vais vérifier sur un écran différent si elles donnent le résultat attendu.

<p>...</p>
<div style="width: 60vw; margin:  0vh 0vw 65vh 20vw ;">
<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="z6">&nbsp;</p>
<p id="z7">&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>
<p id="p6">&nbsp;</p>
<p id="p7">&nbsp;</p>
</div>
<p>...</p>
<style><!--
#z1{position:absolute; z-index:10; width:60vw; height:5vh; margin: 4vh 0vw;}
#z2{position:absolute; z-index:10; width:60vw; height:5vh; margin: 12vh 0vw;}
#z3{position:absolute; z-index:10; width:60vw; height:5vh; margin: 20vh 0vw;}
#z4{position:absolute; z-index:10; width:60vw; height:5vh; margin: 28vh 0vw;}
#z5{position:absolute; z-index:10; width:60vw; height:5vh; margin: 36vh 0vw;}
#z6{position:absolute; z-index:10; width:60vw; height:5vh; margin: 44vh 0vw;}
#z7{position:absolute; z-index:10; width:60vw; height:5vh; margin: 52vh 0vw;}

#p1{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s, -webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/wgj0LSiN0GMCBvBf82HL7Wux6aA.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:4vh 0vw;}
#p2{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s, -webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/71SQp3fM9YvRg3QkyVdCE0p02ug.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:12vh 0vw;}
#p3{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/QsDCNZVdd1n4l_dTn8I2vK2OWro.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:20vh 0vw;}
#p4{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/EECT2HnZYMCLWeku4_dzsPNoBw8.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:28vh 0vw;}
#p5{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/fS-e_ge-GQymbPYofxIhRZXleIY.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:36vh 0vw;}
#p6{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/4k8_pC6iYV7fMfOgtfyjejq0Lss.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:44vh 0vw;}
#p7{position:absolute; z-index:1; transition:height 1s linear 0s, filter 1s linear 1s,-webkit-filter 1s linear 1s, margin 1s linear 0s; width:60vw; height:5vh; background:url('http://ekladata.com/Eo2zCMT_BEJccLqVs39RR3Eaha4.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:52vh 0vw;}

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