JSFiddle - React, Tailwind, and code Playground

HTML

<img draggable="false" id="one" 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("one").addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('hello from right click');
    return false;
}, false);