JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<img src="http://2.bp.blogspot.com/_pP4JIb2v5LA/TH9nWQ4VwCI/AAAAAAAABTQ/PFM1X6LB-ug/s1600/Smiley.png" alt="smile" id="imgSmile">
  </img>

JavaScript

//Hover sobre a imagem com animação para aumentar 
$(document).ready(function()
 {
 
 $("xpto").hover(
		function()
		{
				$(this).append( $( "<span> ***</span>" ) );
				//ou
				$(this).addClass("classXPTO");
				//ou
				$(this).removeClass("classXPTO");
		}, 
		function()
		{
				$(this).find( "span:last" ).remove();
				//ou
				$(this).addClass("classXPTO");
				//ou
				$(this).removeClass("classXPTO");
				//ou
				$(this).removeClass("classXPTO");
		}
);

 });
       $('#imgSmile').width(62);
       $('#imgSmile').mouseover(function()
       {
          $(this).css("cursor","pointer");
          $(this).animate({width: "72px"}, 'normal');
       });
    
    $('#imgSmile').mouseout(function()
      {   
          $(this).animate({width: "62px"}, 'fast');
      });
 });