JSFiddle - React, Tailwind, and code Playground

by mohamm_98666

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="thumbs">
  <img src="https://picsum.photos/id/190/50/80" width="50"height="50" >
  <img src="https://picsum.photos/id/290/50/80" width="50"height="50" >
  <img src="https://picsum.photos/id/20/50/80" width="50"height="50" >
  <img src="https://picsum.photos/id/2/50/80" width="50"height="50" >
  <img src="https://picsum.photos/id/29/50/80" width="50"height="50" >
 </div>
 
 <img id="main" src="https://picsum.photos/id/90/50/80">

JavaScript

$('#thumbs img').hover(function(event){
  
  $(this).fadeOut(100, function() {
        var thisSRC=$(this).attr('src');
  $('#main').attr('src',thisSRC);
    }).fadeIn(100);
  });