Progress bar under an image slider in pure CSS

Question

I would like to make a progress bar under a slider in pure CSS. I have two images in my slider, the bar must be at 50% when the first image is shown and at 100% when the second image is shown.

However I can't display as expected the bar for the second image, the bar won't resize when switching to it (image slider works fine)

Can you help me ?

Thank you ! Audrey

  #slider { position: relative; width: 100%; height: 400px; overflow: hidden; } #images_slider { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 400px; } #images_slider li { display: flex; } #images_slider img { width: 100%; height: 450px; } #image_gars:target #image_fille { left: -150%; } #banniere #bouton_prev { position: absolute; left : 0; top: 42%; border : solid rgba(153,153,153,0.2) 0.1px; background-color: rgba(153,153,153,0.2); width: 25px; height: 50px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding-top: 10px; padding-right: 5px; z-index: 6; } .fa.fa-chevron-left { position: absolute; left : 0; top: 45%; margin-left: 5px; color: white; z-index: 4; } #banniere #bouton_next { position: absolute; right: 0; top: 42%; border : solid rgba(153,153,153,0.2) 0.1px; background-color: rgba(153,153,153,0.2); border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding-top: 10px; padding-left: 5px; width: 25px; height: 50px; z-index: 6; } .fa.fa-chevron-right { position: absolute; right: 0; top: 45%; color: white; margin-right: 5px; z-index: 4; } #ProgressBar { width: 100%; height: 5px; background-color: #A6A6A6; } #Progress { width: 50%; background-color: rgb(53,151,183); height: 100%; } #bouton_next:target #Progress { width: 100%; background-color: blue; height: 100%; } 

  <div id="banniere"> <div id="slider"> <ul id="images_slider"> <li><img src="images/slider/fillepeinture.jpg" alt="Petite fille avec les mains pleine de peinture" id="image_fille"/></li> <li><img src="images/slider/garconmegaphone.jpg" alt="Petit garçon avec un mégaphone" id="image_gars"/></li> </ul> </div> <a href="#image_fille" id="bouton_prev"></a> <a href="#image_gars" id="bouton_next"></a> <i class="fa fa-chevron-right" aria-hidden="true"></i> <i class="fa fa-chevron-left" aria-hidden="true"></i> </div> <div id="ProgressBar"> <div id="Progress"></div> </div> 

Answer 1

I took another stab at this. You were right when you pointed out that the duplicate IDs were a problem. With more than one ID that can be targeted by the anchor, it turns out that neither of them were targeted.

I added a containing div that now carries the triggering ID, and reworked the css for the images and progress divs to use the container's targeted state to switch on and off:

 #ProgressBar div { border: 1px solid black; color: red; font-style: italic; } #ProgressBar .image_fille { width: 50%; } #ProgressBar .image_gars { width: 100%; } .container .image_fille { display: block; } .container .image_gars { display: none; } .container:target .image_fille { display: none; } .container:target .image_gars { display: block; } 

 <div class="container" id="image_gars"> <div id="banniere"> <img class="image_fille" src="" alt="image fille" /> <img class="image_gars" src="" alt="image gars" /> <a href="#image_fille" id="bouton_prev">bouton prev</a> <a href="#image_gars" id="bouton_next">bouton next</a> </div> <div id="ProgressBar"> <div class="image_fille">half progress</div> <div class="image_gars">full progress</div> </div> </div>