JSFiddle - React, Tailwind, and code Playground

HTML

<img style="background-color: black" class="show"><br><br>
<button id="letsshow">show me / hide me</button>

CSS

.borders {
    border: 3px solid red;
}
.show {
}
.hidden {
}

JavaScript

$("img").attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
$(function() {
/*
        Change the source of image on click
    */
    $("img").toggle(function() {
        $(this).attr("src", "http://www.worldinmotion.net/electronic/discography/soundtrack/CoolWorld.jpg").fadeIn();
    }, function() {
        $(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");

    });
/*
        Change the class on mouse enter
    */
    $("img").mouseenter(function() {
        $(this).addClass("borders");
    });
    $("img").mouseleave(function() {
        if ($(this).hasClass("borders")) {
            $(this).removeClass("borders");
        }
    });
/*
        hide / show
    */
    $("#letsshow").click(function(){
        if ($("img").hasClass("show")){
            $("img").fadeOut();
            $("img").toggleClass("show");
        }
        else{
            $("img").fadeIn();
            $("img").toggleClass("show");
        }
    });

});