Mobile button/block needs multiple "clicks" to open

I am using code that is not at all on mobile devices - i understand from reading other posts that ":hover" doesnt function on mobile.

Im looking for an alternative for two sets of code that I have applied to the same image - hoping it will work on both mobile and desktop. On mobile, the images are requiering multiple clicks

This first one inverts the image (This one is targeted to a specific block🙂

#block-yui_3_17_2_1_1576941445838_49178:hover {
filter: invert(100%);
} 

This second one causes the image to increase in size (this one is NOT targeted to a specific block):

a img.thumb-image {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
   -webkit-transition-property: transform;
           transition-property: transform;
 }
 a img.thumb-image:hover,
 a img.thumb-image:active {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
 }

It works great on desktop, but I'm wondering how can it be adjusted for mobile?