JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img data-img-id="1" src="https://www.shareicon.net/data/128x128/2016/10/20/846459_blue_512x512.png" />
  <img data-img-id="2" src="https://www.writeraccess.com/wp-content/uploads/2014/08/blog-html-5.png" />
  <img data-img-id="3" src="https://www.shareicon.net/data/128x128/2016/06/25/619190_java_256x256.png" />
  <img data-img-id="4" src="https://www.shareicon.net/data/128x128/2016/05/06/760855_css_512x512.png" />
  <img data-img-id="5" src="http://poiemaweb.com/img/socketio-logo.png" />
  <img data-img-id="6" src="https://www.shareicon.net/data/128x128/2016/07/08/116973_development_512x512.png" />
  <img data-img-id="7" src="https://www.shareicon.net/data/128x128/2015/08/30/93000_javascript_512x512.png" />

</div>

<ul>
  <li data-img-id="1">C</li>
  <li data-img-id="2">HTML</li>
  <li data-img-id="3">Java</li>
  <li data-img-id="4">CSS</li>
  <li data-img-id="5">Socket.io/Node</li>
  <li data-img-id="6">Angular.js</li>
  <li data-img-id="7">Javascript</li>
</ul>

CSS

ul {
  list-style: none;
}

li {
  font-size: 14px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 4px;
  display: inline-block;
}

div{
  height:70px;  
}

img {
  height: 50px;
  display: none;
}

JavaScript

$(document).ready(function() {
  $('li').hover(function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.show();
    },
    function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.hide();
    });
});