Hover over thumbnail in desktop causes issues on mobile version

Hi there

I have setup my homepage with show text on hover, for the thumbnails. It works perfectly for desktop browsers and I don't want to change this.  However for mobile devices, the text doesn't show (as the hover function does not work on touch devices).

I therefore want to change this so that only the hover version (the coloured image with text) appears on mobile browsers, without affecting the hover on desktop browser.

How do I keep "show coloured image with text after hover" on the desktop browser and "show coloured image with text" on mobile devices.

Web address is www.gregrawson.com

Thank you!
 

Suppose you have this code

#block-143916491714d5f2e79c {
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out
}

#block-143916491714d5f2e79c:hover {
    opacity: 1
}

you can change it to this, to make code run on desktop only

@media screen and (min-width:992px) {
#block-143916491714d5f2e79c {
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out
}

#block-143916491714d5f2e79c:hover {
    opacity: 1
}
}

Thank you very much!