Jump to content

How can I make CSS hover effect touch-friendly?

Recommended Posts

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.

Link to comment
  • Replies 6
  • Views 158.6k
  • Created
  • Last Reply

This Stack Overflow post would be a good start:


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.

Developer Evangelist at Squarespace.

Link to comment
  • 1 year later...
  • 3 years later...
  • 2 weeks later...

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 :

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.