Вариант с миниатюрами сверху:
.wrapper {
position: relative;
width: 200px;
height: 270px;
padding: 10px;
border: 1px solid;
}
.wrapper>input {
display: none;
}
.wrapper label {
float: left;
display: block;
}
.image {
clear: both;
position: relative;
}
.image>div {
position: absolute;
opacity: 0;
}
#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
opacity: 1;
}
.image img {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid;
}
.wrapper label img {
width: 50px;
height: 50px;
margin: 0 7px;
border: 1px solid;
}
<div class="wrapper">
<input type="radio" name="image" id="mini-1" checked />
<label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
<input type="radio" name="image" id="mini-2" />
<label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
<input type="radio" name="image" id="mini-3" />
<label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
<div class="image">
<div><img src="https://picsum.photos/id/237/200/300"></div>
<div><img src="https://picsum.photos/id/247/200/300"></div>
<div><img src="https://picsum.photos/id/227/200/300"></div>
</div>
</div>
Вариант с миниатюрами снизу:
.wrapper {
position: relative;
width: 200px;
height: 270px;
padding: 10px;
border: 1px solid;
}
.wrapper>input {
display: none;
}
.wrapper label {
float: left;
display: block;
}
.image {
clear: both;
position: relative;
top: -286px;
left: -12px;
}
.image>div {
position: absolute;
opacity: 0;
top: 10px;
left: 10px;
}
#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
opacity: 1;
}
.image img {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid;
}
.wrapper label img {
width: 50px;
height: 50px;
margin: 210px 7px 0 7px;
border: 1px solid;
}
<div class="wrapper">
<input type="radio" name="image" id="mini-1" checked />
<label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
<input type="radio" name="image" id="mini-2" />
<label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
<input type="radio" name="image" id="mini-3" />
<label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
<div class="image">
<div><img src="https://picsum.photos/id/237/200/300"></div>
<div><img src="https://picsum.photos/id/247/200/300"></div>
<div><img src="https://picsum.photos/id/227/200/300"></div>
</div>
</div>
Вариант с миниатюрами слева:
.wrapper {
position: relative;
width: 270px;
height: 200px;
padding: 10px;
border: 1px solid;
}
.wrapper>input {
display: none;
}
.wrapper label {
display: block;
}
.image {
clear: both;
position: relative;
}
.image>div {
position: absolute;
opacity: 0;
top: -215px;
right: 2px;
}
#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
opacity: 1;
}
.image img {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid;
}
.wrapper label img {
width: 50px;
height: 50px;
margin: 6px 0;
border: 1px solid;
}
<div class="wrapper">
<input type="radio" name="image" id="mini-1" checked />
<label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
<input type="radio" name="image" id="mini-2" />
<label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
<input type="radio" name="image" id="mini-3" />
<label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
<div class="image">
<div><img src="https://picsum.photos/id/237/200/300"></div>
<div><img src="https://picsum.photos/id/247/200/300"></div>
<div><img src="https://picsum.photos/id/227/200/300"></div>
</div>
</div>
Вариант с миниатюрами справа:
.wrapper {
position: relative;
width: 270px;
height: 200px;
padding: 10px;
border: 1px solid;
}
.wrapper>input {
display: none;
}
.wrapper label {
display: block;
padding-left: 215px;
}
.image {
clear: both;
position: relative;
}
.image>div {
position: absolute;
opacity: 0;
top: -215px;
left: 0px;
}
#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
opacity: 1;
}
.image img {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid;
}
.wrapper label img {
width: 50px;
height: 50px;
margin: 6px 0;
border: 1px solid;
}
<div class="wrapper">
<input type="radio" name="image" id="mini-1" checked />
<label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
<input type="radio" name="image" id="mini-2" />
<label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
<input type="radio" name="image" id="mini-3" />
<label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
<div class="image">
<div><img src="https://picsum.photos/id/237/200/300"></div>
<div><img src="https://picsum.photos/id/247/200/300"></div>
<div><img src="https://picsum.photos/id/227/200/300"></div>
</div>
</div>