A Repository for random web demonstrations

#7 CSS Image Enlarger that works on iOS

Date - 2011-02-03

If you have every produced a website for the iPhone, iPad and iPod Touch you will have come across the :hover problem in the Safari Mobile browser for these devices.

Hovering a link cannot be done on these devices as they use 'screen taps' to navigate. So tapping a link that has a hover state will activate the hover (as long as the link does not have a url which will open another page). But you cannot then tap elsewhere to cancel the hover, so the hover state persists until another link is tapped.

So in the above 'hover to enlarge' demo, the image can be tapped and it will expand to full size and normally it will stay full sized on these devices. So to overcome this problem I have coded and styled a 'close icon' which will only appear (in the top left corner of the image) when using these mobile devices and tapping this 'close icon' will shrink the image back to its original size. This will take a second or two to activate the close because of the other javascript demos on this page.


Copyright © - all rights reserved