Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.

**CSS**

```css
img {
    width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
    --c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
    visibility: var(--c1-vsb);
}
a.c2-imgs {
    visibility: var(--c2-vsb);
}
#C1:focus { 
    background-color: red;
    --c1-vsb: hidden;
}
#C2:focus {
    background-color: red;
    --c2-vsb: hidden;
}

```

**HTML**

```html
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>

```

But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.

Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.

Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!