JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<div class="delete" ><img src="http://uncrate.com/p/2009/01/warbeast-wireless-guitar-2.jpg" border="0"></div>

CSS

.delete { 
  width: 50px; 
  height: 50px; 
  background-image: url('http://uncrate.com/p/2009/01/warbeast-wireless-guitar-2.jpg') center;
   
}
.delete:hover { 
  background-image: url('http://static.fmpub.net/banners/20120530/4fc685fa8b3eb3064822872185546414231944971305802331074219446571069n.jpg') center;
    
    
}

JavaScript

$(function() {
  $(".delete").hover(function() {
     $("img", this).attr("src", "http://static.fmpub.net/banners/20120530/4fc685fa8b3eb3064822872185546414231944971305802331074219446571069n.jpg").fadeIn(1000);
  }, function() {
     $("img", this).attr("src", "http://uncrate.com/p/2009/01/warbeast-wireless-guitar-2.jpg").fadeOut(200);
  });
});