JSFiddle - React, Tailwind, and code Playground

HTML

<div class="class1"><img class="class1"src="1.png" title="ZZZ"/>Текст1</div><br>
<div class="class2"><img class="class2"src="2.png" title="ZZZ"/>Текст2</div><br>
<div class="class3"><img class="class3"src="3.png" title="ZZZ"/>Текст3</div><br>

<table width="200" border="0">
  <tr>
    <td class="k1" tabindex="0"><img class="class1" src="1.png" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="2.png" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="1.png" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k2"><img class="class2"src="2.png" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="1.png" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="2.png" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k3"><img class="class3"src="3.png" title="ZZZ"/></td>
    <td class="k3"><img class="class3"src="3.png" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="1.png" title="ZZZ"/></td>
  </tr>
</table>

CSS

.k1 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:red;
opacity: 0.6;
}
.k2 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:green;
opacity: 0.6;
}
.k3 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:orange;
opacity: 0.6;
}
.k1:focus:not(:active){
border: 2px solid #000;
opacity : 1;
}
td:hover 
{
opacity: 1;
}

JavaScript

$("div[class ^= 'class']").not("").click(function() {

$("img[class ^= 'class']").hide() ;

$("img."+$(this).attr("class")).show() ;

}) ;