JSFiddle - React, Tailwind, and code Playground

HTML

<div id="exp_banner">
    <img class="bottom transparent" src="http://www.igrice24.net/uploads/avatars/user-2.jpg" />
    <img class="top" src="http://www.gamescastlive.com/wp-content/uploads/2011/11/God-of-War-origins-review-300x120.jpg" />
</div>

CSS

#exp_banner {
  position: relative;
  margin: 0 auto;
  cursor: pointer;
  width: 300px;
}

#exp_banner img {
  position: absolute;
  left: 0;
 -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}

#exp_banner img.transparent {
  opacity: 0;
}

JavaScript

document.getElementById('exp_banner').onclick = function() {
    for(var i = 0; i < this.children.length; i++) {
        if(this.children[i].className.indexOf('top') > -1) {
            if(this.children[i].className.indexOf('transparent') > -1) {
              this.children[i].className = 'top';  
            } else {
              this.children[i].className = 'top transparent';
            }
        }
        
        if(this.children[i].className.indexOf('bottom') > -1) {
          if(this.children[i].className.indexOf('transparent') > -1) {
              this.children[i].className = 'bottom';  
            } else {
              this.children[i].className = 'bottom transparent';
            }
        }
    }
};