JSFiddle - React, Tailwind, and code Playground

HTML

<img draggable="false" id="1" src="http://i.imgur.com/lJZNPIz.png">

SCSS

img {
  &:hover {
    content: url(http://i.imgur.com/4IHgRpD.png)
  }
  &:active {
    content: url(http://i.imgur.com/WzBEQHb.png)
  }
  &.outside:active {
    content: url(http://i.imgur.com/lJZNPIz.png)
  }
}

JavaScript

$('img').mouseleave(function() {
  $(this).addClass('outside')
}).mouseenter(function() {
  $(this).removeClass('outside')
})
document.getElementById("1").oncontextmenu = function() {
  return false
}