JSFiddle - React, Tailwind, and code Playground

HTML

<span class="homepage-services-hover" style="width: 175px; text-align: center;">

    <a href="#">

        <img class="before" src="https://placehold.it/150x150" alt="IMAGE" />

        <span class="before">

            <h5>Title</h5>

            <P>
            Excerpt
            </P>

        </span>


    </a>

    <img class="after" src="https://placehold.it/175x175" alt="IMAGE"/>

    <a class="button after" href="#">TITLE</a>

</span>

SCSS

.homepage-services-hover {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;

    .before {
        position: relative;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
    }

    .after {
        position: absolute;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 0;
    }

    &:hover {
        .before {
            opacity: 0;
            transition: opacity .5s;
            -moz-transition: opacity .5s;
            -webkit-transition: opacity .5s;

            position: absolute;
            top: 0;
            left: 0;
            visibility: visible;
        }
        .after {

            opacity: 1;
            transition: opacity .5s;
            -moz-transition: opacity .5s;
            -webkit-transition: opacity .5s;

            position: relative;
            top: 0;
            left: 0;
            visibility: visible;
        }
    }
}