JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="https://i.imgur.com/nyljaMX.png" style="width:100px">
    <img src="https://i.imgur.com/nyljaMX.png" style="width:100px">
</div>

CSS

/* initial state for the default one, the second selector is to reset when it is hovered again */
div img:first-of-type{
	border: 5px solid red;
}

div:hover img:first-of-type:hover{
  border: 6px solid red;
}

/* state of the default one when the second one is hovered */
div:hover img:first-of-type{
	border: 5px solid transparent;
}

/* initial state of the second one */
div img:last-of-type{
	border: 5px solid transparent;
}

/* state of the second one when hovered */
div img:last-of-type:hover{
	border: 5px solid red;
}


/* styles just for this example */
div{
	display: inline-block;
}
img{
	display: block;
}