JSFiddle - React, Tailwind, and code Playground

HTML

<span data-img="#imagen1">Imagen 1</span>
<span data-img="#imagen2">Imagen 2</span>
<span data-img="#imagen3">Imagen 3</span>
<span data-img="#imagen4">Imagen 4</span>

<div>
<img class="show" id="imagen1" src="http://fotos.elcorreodigital.com/201302/dsc_0048-476x310x80.jpg">
<img id="imagen2" src="http://fotos.elcorreodigital.com/201302/20130225_051835-476x310x80.jpg">
<img id="imagen3" src="http://fotos.elcorreodigital.com/201302/dsc02571-476x310x80.jpg">
<img id="imagen4" src="http://fotos.elcorreodigital.com/201306/tulips-476x310x80.jpg"></div>

CSS

div{
    position:relative;
}
.show{
    display:block;
}
img{
    display:none;
    position:absolute;
}

JavaScript

$('span').mouseover(function(){
    var id_img = $(this).attr('data-img');
    $(id_img).fadeIn().siblings('img').fadeOut();
});