JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square"><img class = "imagesbw" src="http://lorempixel.com/g/100/100/?1"  alt="" width="91" height="76">
<img class = "imagescol" src="http://lorempixel.com/100/100/?2"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="http://lorempixel.com/g/100/100/?3"  alt="" width="91" height="76">
<img class = "imagescol" src="http://lorempixel.com/100/100/?4"  alt="" width="91" height="76">
</div>

<div class="square">
    <img class = "imagesbw" src="http://lorempixel.com/g/100/100/?5" alt="" width="91" height="76">
    <img class = "imagescol" src="http://lorempixel.com/100/100/?6"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="http://lorempixel.com/g/100/100/?7"  alt="" width="91" height="76">
<img class = "imagescol" src="http://lorempixel.com/100/100/?8"  alt="" width="91" height="76">
</div>

JavaScript

$(document).ready(function() {   
  $('.imagesbw').hide();
    
  $(".imagescol").mouseover(function(){
  	$(this).hide();
    $(this).prev().show();
  });
    
  $(".imagesbw").mouseout(function(){
  	$(this).hide();
    $(this).next().show();
  });
})