JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Descrizione -->
<pre>
    Struttura delle directory:
    /thumb/
    /big/
    
    Nella directory /thumb/ sono presenti:
    1.jpg 2.jpg 3.jpg
    
    Nella directory /big/ sono presenti:
    wallpaper-1988599.jpg wallpaper689174.jpg wallpaper712112.png
</pre>

<!-- Parte di HTML da copiare -->

<!-- RICORDARSI DI INCLUDERE JQUERY! -->
<div class="gallery">
    <div class="thumbnails">
      <img src="//demo.mywebexpression.com/tmp/thumb/1.jpg" data-big="wallpaper-1988599.jpg" class="thumb" />
      <img src="//demo.mywebexpression.com/tmp/thumb/2.jpg" data-big="wallpaper712112.png" class="thumb" />    
      <img src="//demo.mywebexpression.com/tmp/thumb/3.jpg" data-big="wallpaper689174.jpg" class="thumb" />
    </div>
    <div class="bigbox">
      <img src="//demo.mywebexpression.com/tmp/big/wallpaper-1988599.jpg" class="big" />
    </div>
</div>

CSS

/* Foglio di stile per l'impaginazione dei contenuti */

/* Dimensione del box galleria */
.gallery { width: 1000px; height: 600px; overflow: hidden; }
/* Larghezza della colonna delle miniature */
.thumbnails { width: 220px; float: left; }
/* Faccio in modo che le miniature non siano mai più larghe della colonna */
.thumbnails .thumb { max-width: 100%; }
/* Box contenente l'immagine grande */
.bigbox { width: 700px; float: left; text-align: center; }
/* Faccio in modo che l'immagine grande non sia mai più grande del box contenente e non sia mai troppo alta */
.bigbox .big { max-width: 100%; max-height: 400px;  }

/* Piccola animazione di ingrandimento al passaggio del mouse sulle thumbs */
.thumb { 
                 width: 195px; margin: 10px; 
    -webkit-transition: all 200ms ease;
       -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
            transition: all 200ms ease;
}
.thumb:hover { width: 200px; margin: 7px;  }

JavaScript

// In queste due variabili bisogna indicare la path in cui saranno contenute le immagini piccole e grandi
// Al momento sono sul mio server FTP, tu dovrai scrivere il percorso assoluto del tuo sito, esempio:
//
// var thumbsDirectory = "/images/thumb/";
//
var thumbsDirectory = "//demo.mywebexpression.com/tmp/thumb/";
var bigDirectory = "//demo.mywebexpression.com/tmp/big/";

// Quando l'utente passa il mouse sopra ad una miniatura, viene mostrata la versione grande.
$(".thumb").hover( function() {
  var big = bigDirectory + $(this).attr("data-big");
  $(".big").attr("src", big);
});