<fieldset>
<label style="--_img: url(https://assets.codepen.io/2585/fiddle-leaf.jpeg)">
<input type="radio" name="images" value="Fiddle Leaf">
</label>
<label style="--_img: url(https://assets.codepen.io/2585/pink-princess.jpeg)">
<input type="radio" name="images" value="Pink Princess">
</label>
<label style="--_img: url(https://assets.codepen.io/2585/kara-eads-zcVArTF8Frs-unsplash.jpg)">
<input type="radio" name="images" value="Monstera" checked>
</label>
<label style="--_img: url(https://assets.codepen.io/2585/pothos.jpeg)">
<input type="radio" name="images" value="Pothos">
</label>
<label style="--_img: url(https://assets.codepen.io/2585/rubber-tree.webp)">
<input type="radio" name="images" value="Rubber Tree">
</label>
</fieldset>
@import "https://unpkg.com/open-props" layer(design.system);
@layer demo {
fieldset {
grid-template-columns:
var(--col-1, 1fr)
var(--col-2, 1fr)
var(--col-3, 1fr)
var(--col-4, 1fr)
var(--col-5, 1fr)
;
@media (prefers-reduced-motion: no-preference) {
transition: grid-template-columns 2s var(--ease-spring-5);
}
&:has(label:nth-child(1) > input:checked) {
--col-1: 5fr;
--col-2: 3fr;
}
&:has(label:nth-child(2) > input:checked) {
--col-1: 2fr;
--col-2: 5fr;
--col-3: 2fr;
}
&:has(label:nth-child(3) > input:checked) {
--col-2: 2fr;
--col-3: 5fr;
--col-4: 2fr;
}
&:has(label:nth-child(4) > input:checked) {
--col-3: 2fr;
--col-4: 5fr;
--col-5: 2fr;
}
&:has(label:nth-child(5) > input:checked) {
--col-4: 3fr;
--col-5: 5fr;
}
> label {
background-image: var(--_img);
background-position: center;
background-size: auto 125%;
}
}
}
@layer demo.support {
html {
background: var(--gradient-9);
block-size: 100%;
}
body {
min-block-size: 100%;
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
fieldset {
inline-size: 80vw;
display: grid;
grid-auto-flow: column;
grid-template-rows: 50vh;
gap: var(--size-3);
border: none;
> label {
cursor: pointer;
border-radius: var(--radius-4);
&:focus-within {
outline: 1px solid green;
outline-offset: 5px;
}
> input {
opacity: 0;
}
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.