JSFiddle - React, Tailwind, and code Playground

by Felix Fong

HTML

<script src="https://cdn.rawgit.com/customd/jquery-visible/master/jquery.visible.min.js"></script>
<h1>
Please keep scroll untill you see the placeholder image
</h1>

<p>This click the image :D</p>
<img src='https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg' class='clickToShow'>
<p>Pleae hover over the image :) </p>
<img src='https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg' class='hoverToShow'>

<div style='height:100em'>

</div>

<img src='https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'>
<div style='height:100em'>

CSS

img{
  width: 200px;
  height: 150px;
}

JavaScript

$(function(){

  $(window).scroll(function() {


      $img = $('img');

      if ($img.visible(true)){
        $('img').attr('src','http://www.catgifpage.com/gifs/318.gif');
      }else {
        $('img').attr('src','https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
      }


	});
  
  //jQuery have two way to listen clck event
  //One is .click and other is on.click
  
  $('.clickToShow').click(function(){
  	$(this).attr('src','http://www.catgifpage.com/gifs/318.gif');
  });
  
  //jQuery have two way to listen mouse enter(hover) event
  //One is .hover and other is on.mouseenter & .onmouseleave
  
  $('.hoverToShow').hover(function(){
  	//When mouse is inside then play GIF
    $(this).attr('src','http://www.catgifpage.com/gifs/318.gif');
	},function(){
  	//Other whilst change back to thumbnail (AKA mouse leave)
    $(this).attr('src','https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
  });
  
  

});