JSFiddle - React, Tailwind, and code Playground

galery animate

by hronic

HTML

<p><img id="largeImg" src="https://js.cx/gallery/img3-lg.jpg" alt="Large image"></p>

  <div id="thumbs">
    <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
    <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
    <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
    <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
    <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
    <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
  </div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 75%/120% Arial, Helvetica, sans-serif;
}

h2 {
  font: bold 190%/100% Arial, Helvetica, sans-serif;
  margin: 0 0 .2em;
}

h2 em {
  font: normal 80%/100% Arial, Helvetica, sans-serif;
  color: #999999;
}

#largeImg {
  border: solid 1px #ccc;
  width: 550px;
  height: 400px;
  padding: 5px;
  transition: all .8s ease-in;
}

#thumbs img {
    border-radius: 50px;
    transition: all 1s;
}
#thumbs img:hover{
  border-radius: 0;
}
#thumbs a {
  border-radius: 50px;
  border: solid 1px #ccc;
  width: 100px;
  height: 100px;
  padding: 3px;
  margin: 2px;
  float: left;
  opacity: .5;
  filter: blur(2px);
  transition: all .5s ease-in-out;
}

#thumbs a:hover {
  border-radius: 0;
  opacity: 1;
  filter: blur(0);
  border-color: #FF9900;
}

JavaScript

var imgLg = document.getElementById('largeImg');
  var imgThumbs = document.getElementById('thumbs');
  
  imgThumbs.onclick = function(e){
    var target = e.target;
    
    function insertImg(obj){
      imgLg.style.cssText = 'transform: perspective(800px) rotateY(270deg)';
        imgLg.addEventListener('transitionend', function(e){
          imgLg.setAttribute('src',obj.getAttribute('href'));
          imgLg.setAttribute('alt',obj.getAttribute('title'));
          imgLg.style.cssText = 'transform: perspective(800px) rotateY(360deg); transition: all .5s ease';
              imgLg.addEventListener('transitionend', function(){
               this.style.cssText = 'transform: perspective(0) rotateY(0); transition: all 0s ease 0s';
              })
        })

      return false;
    }
    while(target != this){
      if(target.nodeName == 'A') return insertImg(target);
      target = target.parentNode;
    }
    
    return false;
  }