I have created a css image slider with radio buttons to control it. I have set the radio buttons to visibility: hidden
and am using thumbnail images for the labels. The html looks something like this :
<div class="slider">
<input type="radio" value="navy" id="colour" name="attribute_colour" >
<label for="navy">
<img src="uploads/navy.png">
</label>
repeat lines 2-5 for other thumbnails, then :
<div class="slidermain"><ul>
<li>
<img src="uploads/navyfullsize.png">
</li>
repeat lines 2-4 for main images and close with :
</ul></div></div>`
I want clicking the image for navy.png
to move the <ul>
containing navyfullsize.png
down 100%, so I would have thought that to select the button/image for navy.png
, you should write this into the stylesheet :
.slider input[type=radio]:checked + label[for=navy]~.slidermain>ul
{ top:-100%; }
But to no avail! I've tried a number of similar alternatives, I don't know anything about jquery, so the css solution would be very helpful please.