JSFiddle - React, Tailwind, and code Playground

HTML

<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="cars"> cars </a> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="bikes"> bikes</a>
<br />
<br />
<h4 id="lh">Bikes</h4>

<img id="ctl00_ContentPlaceHolder1_men_imgCat" src="http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG" />

CSS

a {
    
    color:#000;
    font:15px verdana;
    
}


#lh { 
    font : bold 16px Arial;
    }

JavaScript

var arr =[];
arr[0] = "http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG";

arr[1] = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";

arr[2] = "http://www.gravatar.com/avatar/54d38793d7a407446999b33b81d607fd?s=128&d=identicon&r=PG";

//for instance i'm using an array to cache your image links

//if you can want these links as your anchor tag "title" attrib just modify the below code

 $(document).ready(function() {  
     
     var which_image = null; //detect which Image to use
       $(".subCatLinksSelected").hover(function() {
          
           var catn = $(this).attr('title');
           if(catn == 'cars') {        
               which_image = arr[1];
           } else {
               which_image = arr[2];
           }    
           onMouseOverCatDisplay(which_image, 'Go to: ' + catn,'#0099f9');
           
       },function() { 
           
          var catn = $("a.subCatLinksSelected").first().attr('title');
           which_image = arr[0];
          onMouseOverCatDisplay(which_image,'You see: ' + catn, '#000');
                      
       });
    });


 function onMouseOverCatDisplay(catimg, catnaam, color) {
   $('#ctl00_ContentPlaceHolder1_men_imgCat').attr('src',catimg);
     
   $("#lh")
        .css({opacity:0.2,color:"#1c1c1c"})
        .html(catnaam)
        .css({color: color})
        .stop()
        .animate({opacity:1 },2000);
        
    
 }