Нужна помощь, как сделать так, чтобы мое увеличенное изображение отображалось над миниатюрами после того, как переключат ⇐ CSS

[Anonymous]

Вот код, который у меня есть. когда я нажимаю на изображение 1, то же самое изображение 1 будет отображаться в большем контейнере, однако я мог бы разместить контейнер большего изображения только под миниатюрами изображений, которые у меня есть, поскольку класс image-bg требуется для размещения ниже функции радио всех миниатюр изображений. .
Мне интересно, есть ли способ разместить большие изображения класса image-bg или ответа вверху маленьких миниатюр? Я хочу сделать это без использования Javascript. Любая помощь будет оценена по достоинству.

Код: Выделить всё

    .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();
background-size: cover;
}
#img-02{
background-image: url();
background-size: cover;
}

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

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

Когда я помещаю «» над расширением . Граница большего изображения будет отображаться над миниатюрами, но каждый раз, когда я нажимаю на любое миниатюрное изображение, рамка не отображает никаких ответных изображений.

Подробнее здесь: https://stackoverflow.com/questions/781 ... es-after-r