Simples Thumbnails

HTML

<div class="main-image">
    <img src="http://placehold.it/600x600" alt="Placeholder" class="custom">
  </div>  
  <ul class="thumbnails">
    <li><a href="#"><img src="https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png" alt="Thumbnails"></a></li>
    <li><a href="#"><img src="https://www.e-conomix.at/blog/wp-content/uploads/2011/03/html5-logo.jpg" alt="Thumbnails"></a></li>
    <li><a href="#"><img src="https://2.bp.blogspot.com/-xdZxDAStMTc/UQRY8nCnmuI/AAAAAAAAW98/sqp4pXNrlE8/s1600/Backbone_logo_logo_only.png" alt="Thumbnails"></a></li>
    <li><a href="#"><img src="http://www.geeks.gallery/wp-content/uploads/2014/10/angularjs-logo-trans.png" alt="Thumbnails"></a></li>
  </ul>

CSS

.thumbnails img, .main-image img {
      max-width: 100%;
      padding: 5px;
      border: 1px solid #ccc;
      height: auto;
      background: #fff;
      box-shadow: 1px 1px 7px rgba(0,0,0,0.1);
    }


    .main-image {
      max-width: 400px;
      width: 100%;
      margin-bottom: 0.75em;
    }
    .thumbnails li {
      display: inline;
      margin: 0 10px 0 0;
      width: 40px;

    }

    .thumbnails li img {

      width: 80px;

    }
    .thumbnails {

    padding: 0;

    }

JavaScript

var thumb = document.querySelectorAll('.thumbnails li');
 thumb.forEach(function(x){ 
	x.addEventListener('mouseover',function(e){
  $this=e.target;
var imgSrc= $this.src; 
var main_img = document.querySelector('.main-image img'); 
main_img.setAttribute('src',imgSrc);
  
 });
 });