JSFiddle - React, Tailwind, and code Playground

HTML

<span id="first"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fopenclipart.org%2Fimage%2F800px%2Fsvg_to_png%2F192413%2Ftete.png&f=1" id="move1" class=""></span>
	<span id="second">	<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Farhivach.org%2Fstorage%2Fd%2F61%2Fd613ee91d005141180bf9c2868b04f5f.jpg&f=1" id="move2" class=""></span>

CSS

.opacity {  
        opacity: 0.3;
        transition: 0.3s ease-in-out;
	  } 
	    .opacityBack {  
        opacity: 1;
        transition: 0.3s ease-in-out;
	  } 


img { 
height: 30%;
width: 30%;
}
  #move1{
		   
    transition-delay: 0.5s; 
        transition: 0.3s ease-in-out;
         
		 
		 }
		#move1:hover  {    
        transform: translate(3em,0);
} 

	 #move2{
		   
    transition-delay: 0.5s; 
        transition: 0.3s ease-in-out;
         
		 
		 }

#move2:hover  {    
        transform: translate(-3em,0);
}

JavaScript

function isHover(e) {
  return (e.parentElement.querySelector(':hover') === e);
}


var pickOne = document.getElementById('move1');;
document.addEventListener('mousemove', function checkHover() {
  var hovered = isHover(pickOne);
  if (hovered !== checkHover.hovered) {
    hovered ? document.getElementById("move2").classList="opacity" : document.getElementById("move2").classList="opacityBack";
    checkHover.hovered = hovered;
  }
});

var pickTwo = document.getElementById('move2');;
document.addEventListener('mousemove', function checkHover() {
  var hovered = isHover(pickTwo);
  if (hovered !== checkHover.hovered) {
    hovered ? document.getElementById("move1").classList="opacity" : document.getElementById("move1").classList="opacityBack";
    checkHover.hovered = hovered;
  }
});