responsive website: how to keep on mobile, hover layer element "on" by default

in my website, there are projects icons that have a layer on mouseover, that displays titles.

What I looking for is to have that layer constantly there when viewing the site on mobiles.

There is this piece of javascript code that apparently deals with that effect:

/* Set Default Text Color for all elements */
        $(".ut-hover").each(function(index, element) {

            var text_color = $(this).closest('.ut-portfolio-wrap').data('textcolor');

            $(this).find(".ut-hover-layer").css({ "color" : text_color });
            $(this).find(".ut-hover-layer").find('.portfolio-title').attr('style', 'color: '+text_color+' !important');

        });     

        $('.ut-hover').on('mouseenter touchstart', function() {     
            var hover_color   = $(this).closest('.ut-portfolio-wrap').data('hovercolor'),
                hover_opacity = $(this).closest('.ut-portfolio-wrap').data('opacity');

            $(this).find(".ut-hover-layer").css( "background" , "rgba(" + hover_color + "," + hover_opacity+ ")"  );
            $(this).find(".ut-hover-layer").css( "opacity" , 1 );           

        });

        $('.ut-hover').on('mouseleave touchend', function() { 

            $(this).find(".ut-hover-layer").css( "opacity" , 0 );

        });

The css of the layer containing the text is "ut-hover-layer"

I need to modify that script so that IF the site is seen on a mobile screen, the "ut-hover-layer" is visible on load and always stays, so no mouseover is supposed to happen.

Anyone would have a solution to achieve that ?

if that can help, here is the link to the site

Thanks in advance !