Progress bar under an image slider in pure CSS - html

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>
<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" />
bouton prev
bouton next
</div>
<div id="ProgressBar">
<div class="image_fille">half progress</div>
<div class="image_gars">full progress</div>
</div>
</div>