JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
    <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0" alt="About Plumbing Repairs in Honolulu Hawaii" />
   </a>

CSS

a {
        background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
        width:150px;
        margin:0;
        padding:0;
        float:left;
    }
    a img {
        opacity:1;
        transition:opacity .5s;
        float:left;
    }
    a:hover img {
        opacity:0;
        transition:opacity .5s;
    }