JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="input">

<div class="img">
  <img src="http://www.enjaztech.com/vb/uploadcenter/uploads/04-2014/PIC-298-1396432656.jpg" alt="">
</div>
<div class="img">
  <img src="http://3.bp.blogspot.com/-PrvE8JtAXsE/VgQe12DMoGI/AAAAAAAAATA/e7u4I_-ehQU/s1600/JavaScript%2BTooltip.png" alt="">
</div>
<div class="img">
  <img src="https://www.it-community.in.ua/wp-content/uploads/2014/08/JavaScript.jpg" alt="">
</div>

CSS

.img {
  display: none;
}
.showed {
  display: block;
}

JavaScript

let input = document.querySelector('.input');
input.addEventListener('input', function() {
	let value = this.value;
  let images = document.querySelectorAll('.img');
  images.forEach((item, i) => {
    item.classList.remove('showed');
    if ((i === +value - 1) && (value > 0) && (value <= 3)) {
      item.classList.add('showed');
    }
  });
});