JSFiddle - React, Tailwind, and code Playground

HTML

<div class="effect"><a href="/refill"> <img class="image" src="https://dl.dropboxusercontent.com/u/2491607/WEB/IMAGES/Special/BUTTONS/REFILL-BUTTON.jpg" /><img class="image hover" src="https://dl.dropboxusercontent.com/u/2491607/WEB/IMAGES/Special/BUTTONS/REFILL-BUTTON2.jpg" /></a>
</div>
<div class="effect"><a href="/RErefill"> <img class="image" src="https://dl.dropboxusercontent.com/u/2491607/WEB/IMAGES/Special/BUTTONS/RE-BUTTON.jpg" /><img class="image hover" src="https://dl.dropboxusercontent.com/u/2491607/WEB/IMAGES/Special/BUTTONS/RE-BUTTON2.jpg" /></a>
</div>
<div class="effect"><a href="/ios"> <img class="image" src="https://dl.dropboxusercontent.com/u/2491607/WEB/IMAGES/Special/BUTTONS/IOS-BUTTON.jpg" /><img class="image hover" src="https://dl.dropboxusercontent.com/u/2491607/WEB/IMAGES/Special/BUTTONS/IOS-BUTTON2.jpg" /></a>
</div>

CSS

.effect {
    position:relative;
}
.effect a {
    display:block;
}
div.effect img.image {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
div:hover.effect img.image {
    opacity: 0;
}
div.effect img.hover {
    opacity: 0;
    position:absolute;
    top:0;
}
div:hover.effect img.hover {
    display:block;
    opacity: 1;
}