Change z-index with counter-increment - css

Question

I try to make an image slider which will show a picture when a mouse hovers over a dot. I tried too switch between images by using z-index but nothing moved.
.slider {
counter-reset: index 1000;
}
.slider input[name='slide_switch']:hover+label+img {
counter-increment: index;
z-index: counter(index);
}

Answer 1

The way you were trying to use counter wasn't going to work even if you used JavaScript/jQuery. The counter properties are used to number elements like an ordered list it has nothing to do with z-index. The best you can do is to rely on CSS animation which you can see in the following snippet. The key properties were:
transition: all 3s a long duration is needed to view z-index animated.
color: rgba(R, G, B, A) A is an opacity value that can change from totally visible to invisible, plus the levels of transparency between.
position: absolute/relative is not only required for z-index but also helpful for vertical and horizontal dimensions for elements as well.
calc() a function that will apply a simple equation for CSS properties. One of it's best features is that will work with a combination of absolute (e.g. px, pt, etc.) and/or relative (e.g. em, %, etc.) values.
When hovering over a circle, keep the cursor there for 3 sec. Animating z-index is a slow process because at faster speeds the progressive fading won't be noticeable.
Snippet
html {
font: 400 12px/1.2 'Consolas';
}
.slider {
position: relative;
width: 250px;
height: 250px;
}
output {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 3s;
display: block;
}
output b {
position: absolute;
font-size: 5rem;
top: calc(125px - 2.5rem);
text-align: center;
display: block;
width: 100%;
}
label {
z-index: 100;
position: relative;
height: 25px;
width: 25px;
padding: 5px;
cursor: pointer;
display: inline-block;
}
label b {
z-index: 100;
position: relative;
height: 15px;
width: 15px;
border: 1px solid #fff;
border-radius: 12px;
cursor: pointer;
margin: 5px;
display: inline-block;
padding: 1px 1px 0;
text-align: center;
color: #fff;
}
#A {
z-index: 10;
background: rgba(190, 0, 0, .5);
}
#B {
z-index: 20;
background: rgba(0, 0, 190, .5);
}
#C {
z-index: 30;
background: rgba(255, 50, 0, .5);
}
#D {
z-index: 40;
background: rgba(50, 200, 50, .5);
}
#E {
z-index: 50;
background: rgba(210, 100, 55, .5);
}
#F {
z-index: 60;
background: rbga(255, 200, 0, .5);
}
#a:hover~#A {
z-index: 70;
transition: all 3s;
background: rgba(190, 0, 0, 1);
}
#b:hover~#B {
z-index: 70;
transition: all 3s;
background: rgba(0, 0, 190, 1);
}
#c:hover~#C {
z-index: 70;
transition: all 3s;
background: rgba(255, 50, 0, 1);
}
#d:hover~#D {
z-index: 70;
transition: all 3s;
background: rgba(50, 200, 50, 1);
}
#e:hover~#E {
z-index: 70;
transition: all 3s;
background: rgba(210, 100, 55, 1);
}
#f:hover~#F {
z-index: 70;
transition: all 3s;
background: rgba(255, 200, 0, 1);
}
label:hover {
background: rgba(255, 255, 255, .1);
color: #000;
}
.top {
z-index: 75;
background: rgba(255, 255, 255, 1);
position: absolute;
width: 250px;
height: 205px;
transition: all 3s
}
label:hover~.top {
z-index: 0;
background: rgba(255, 255, 255, .1);
transition: all 3s
}
hr {
position: relative;
z-index: 101;
}
<fieldset class='slider'>
<label id="a" for="A"><b>A</b></label>
<label id="b" for="B"><b>B</b></label>
<label id="c" for="C"><b>C</b></label>
<label id="d" for="D"><b>D</b></label>
<label id="e" for="E"><b>E</b></label>
<label id="f" for="F"><b>F</b></label>
<hr/>
<output id="A"><b>A</b></output>
<output id="B"><b>B</b></output>
<output id="C"><b>C</b></output>
<output id="D"><b>D</b></output>
<output id="E"><b>E</b></output>
<output id="F"><b>F</b></output>
<div class='top'> </div>
</fieldset>

Answer 2

This is a neat idea, but runs into one or two problems:
The CSS counter() function returns a <string> but the z-index property is looking for an <integer>.
Browsers don't really support it anyway.
The MDN counter() docs note that:
The counter() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
It's not completely clear what they mean by "the type-or-unit parameter" since none is discussed on that page. The attr() function does allow returning alternate types (e.g. an integer) via a <type-or-unit> parameter. I wonder if someone was toying with adding the same parameter to counter() at some point; if so, this appears to have been abandoned long ago.