How can I make CSS hover effect touch-friendly?

So I found these really cool CSS Hover effects that I would like to use. There are 10 versions and they are really easy to implement thanx to the original authors great tutorial.

The only issue seems to be that a few of the effects, including the one I would really like to use does not seem to be touch device friendly. It wouldn't be so bad if the hover effect and text didn't work but they kept the click to linked page but even the link does not work. They just become dead picture that do nothing when touched. (Not: have only tested on a iPad/iPhone but I assume it effects all touch type inputs).

Here is the linke to the examples: http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html#

Number 10 is the one I would like to use so I am looking for input to see if there is a way to make it "touch friendly" or if anyone else has a similar one that works 100%.

I am looking to replace the current version I currently have on my page that only has the "enlarge" aspect to it, but would like a version that allows me to add text.

Site to be used on is www.ahsonoz.com.

Of course as I have written else where my dream solution would be to have a index like approach from the flatiron template built into a template like five.

This Stack Overflow post would be a good start:

http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers

Hiding things behind a hover is becoming less and less acceptable as more people use touch devices. I think the best thing to do is steer clear of using hover effects, but if you must it will take some scripting.

Thanx foley, I was curious though why some of them work and others didn't. Was the person just lazy or just the way the effect is done that some will and others won't.

Here's another post that suggests there's a way to fix this.

http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari

I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover

I was very confused that how can i make the effect in the images and gallery of my website.then i ll find a way to concern with the professional that help me out so much in this. If you have any issue with this please concern with them

In my site image position in center.This task very difficult for me.I can used Different types of css forcorrect this issue. Finally i get an idea from my friend.He advised me to contact with with his web developer friend that experts in squarespace. His article is very helpful for me and if you try it out i am sure it also suits your code. You can go through with this link :