Need help on how to get my bigger image shown above the thumbnail images after radio botton checked on the thumbnail images without use javascript?

Question

Here is the code i have. when I click on the image1, the same image1 will shown in the bigger container, however i could only place the bigger image container below the thumbnails images i have as the class image-bg required to put below the radio function of all the thumbnail images. I am wondering if there is a way to put the class image-bg or response bigger images at the top of the small thumbnails? I want to do that without using any Javascript.. Any help will be appreciated.

    .image-bg{
    margin: 10px 100px 10px 300px;
        width: 500px;
        height: 500px;
        border: 1px solid #222;

    }


    .image-box input[type="radio"]{
     width: 80px;
     height: 80px;
     display: inline-block;
     border: 1px solid #D3D3D3;
     outline: none;
          appearance: none;
 }

    #img-01{
        background-image: url(<image1>);
            background-size: cover;
    }  
#img-02{
        background-image: url(<image2>);
            background-size: cover; 
    }  

    
    #img-01:checked ~ .image-bg{
        background-image: url(<image1>);
            background-size: cover;
    }

    #img-02:checked ~ .image-bg{
        background-image: url(<image2>);
            background-size: cover;
    }
    



<div class="image-box">
            <input type="radio" id="img-01" name="image" checked>
    <input type="radio" id="img-02" name="image">       
    <div class="image-bg"></div>
</div>

When I put the "" above the . The border of the bigger image will shown above the thumbnails but any time i click on any thumbnail images the border wont show any response images.

Answer 1

You can control the visual order of elements if you use Flexbox or CSS grid.

In this example I set parent to be the Flexbox container and applied some sensible values based on your code.

The trick to make the big image show up before everything is in order: -1;.

I added labels for your input for accessibility, and put them after their inputs because that is a common need to control the labels based on the checked state. (Labels are used as thumbs, not input fields.)

Usually the input radios are visually hidden, you can search for that solution.

This is a good direction to create a pure CSS image gallery, without javascript, because if you can do it without js you should, but it will take a bit complex code to have different images triggered by different radios.

   .image-box {
     display: flex;
     flex-flow: row wrap;
     gap: 1vw;
   }
   
   label {
     background-color: silver;
     flex: 0 0 80px;
   }
   
   [type='radio'] {
     /* replace this with visually hidden code */
     /* clip-path: .... */
     height: 1px;
     position: absolute;
     width: 1px;
   }

   [type='radio']:checked + label {
     background-color: lightgreen;
   }
   
   .image-bg{
    margin: 10px 100px 10px 300px;
        width: 500px;
        height: 500px;
        border: 1px solid #222;
        flex: 1 0 100%;
        order: -1;

    }


    .image-box input[type="radio"]{
     width: 80px;
     height: 80px;
     display: inline-block;
     border: 1px solid #D3D3D3;
     outline: none;
          appearance: none;
 }

    #img-01{
        background-image: url(<image1>);
            background-size: cover;
    }  
#img-02{
        background-image: url(<image2>);
            background-size: cover; 
    }  

    
    #img-01:checked ~ .image-bg{
        background-image: url(<image1>);
            background-size: cover;
    }

    #img-02:checked ~ .image-bg{
        background-image: url(<image2>);
            background-size: cover;
    }
    

<div class="image-box">
            <input type="radio" id="img-01" name="image" checked>
            <label for="img-01">Img 01</label>
    <input type="radio" id="img-02" name="image">
    <label for="img-02">Img 02</label>
    <div class="image-bg"></div>
</div>