JSFiddle - React, Tailwind, and code Playground

HTML

<div class="roles_box">
    <a href=""><img class="click_role" src="http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1"></a>
</div>

CSS

.roles_box {
    width:600px;
    margin:0px auto;
    background:#dfdfdf;
    text-align:center;
}

JavaScript

jQuery(document).ready(function () {
    jQuery(".roles_box").on({
        "mouseover": function () {
            $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=16f4a8f2-2cea-44c1-ba22-cf3c52729f6b&version=-1';
        },
            "mouseout": function () {
            $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1';
        }
    });
});