JSFiddle - React, Tailwind, and code Playground

HTML

<div class="model">
    	<img src="images/baman.png">
    </div> 
   
    <div id="pain1">
    	<img class="pain1" src="images/painspot.png">
        <img class="shoulder" src="images/shoulder.png">
    </div>  
    
    <div id="pain2">
    	<img class="pain2" src="images/painspot.png">
        <img class="back" src="images/back.png">
    </div>
    
    <div id="pain3">
    	<img class="pain3" src="images/painspot.png">
        <img class="hip" src="images/hip.png">
    </div>

CSS

.model {
	position: absolute;
	right: 500px;
}
 
#pain1 {
	position: absolute;
	left: 710px;
	top: 220px;
	margin: auto;
}
 
.shoulder {
	display: none;
}

.pain1:hover + .shoulder {
	display: inline;	
}

.pain1:hover{
	border: 3px solid transparent;
	display: block;	
}

#pain2 {
	position: absolute;
	left: 627px;
	top: 390px;
	margin: auto;
}

.back {
	display: none;
}

.pain2:hover + .back{
	display: inline;
}

.pain2:hover{
	border: 3px solid transparent;
	display: block;	
}

#pain3 {
	position: absolute;
	left: 680px;
	top: 425px;
}

.hip {
	display: none;	
}

.pain3:hover + .hip{
	display: inline;	
}

.pain3:hover {
	border: 3px solid transparent;
	display: block;	
}